前提・実現したいこと
現在、scriptでminigridを入れ、さらにcssのアニメーションで動きを出しているのですが、
最初にページを開いた時に、上に重なるようにして集まって(浮いて)きます。
リロードをかけるか、ウィンドウの幅を手作業で変えると下にずれ、
希望の表示に戻ってくれるのですが、
何が原因なのかわかりますでしょうか。
該当のソースコード
HTML
1<div class="card"> 2 <div class="work"> 3 <img src="images/portfolio/tsuzuku.jpg" alt="tsuzukuパッケージ"> 4 </div> 5 6 <article> 7 <p>2019<br> 8 TSUZUKU Package Deasign<br> 9 officehojo portfolio<br> 10 </p> 11 </article> 12</div>
SCRIPT
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script src="https://unpkg.com/minigrid@3.1.1/dist/minigrid.min.js"></script> 3 4 5<script> 6 7if (location.protocol === 'http:') { 8 location.href = 'https:' + window.location.href.substring(window.location.protocol.length); 9} 10 11(function(){ 12 var grid; 13 function init() { 14 grid = new Minigrid({ 15 container: '.cards', 16 item: '.card', 17 gutter: 12 18 }); 19 grid.mount(); 20 } 21 22 // mount 23 function update() { 24 grid.mount(); 25 } 26 27 document.addEventListener('DOMContentLoaded', init); 28 window.addEventListener('resize', update); 29})();
CSS
1.cards { 2 max-width: 80%; 3 height: auto; 4 text-align:center; 5 margin-left:20%; 6} 7 8.card { 9 width: 100%; 10 height:auto; 11} 12 13/*アニメーション*/ 14.card { 15 transition:.5s ease-in-out; 16} 17 18.work{ 19 width:90%; 20 height:auto; 21 padding:20px 10px; 22 /*border:1px solid #9fa0a0; 23 border-radius:20px;*/ 24 box-shadow:1px 2px 10px -3px #696969; 25 border-radius:4px; 26} 27 28.work img{ 29 width:100%; 30 height:auto; 31} 32 33article{ 34 padding:10px 8px; 35 font-size:9px; 36 text-align:left; 37 line-height:1.7em; 38 color:#7B7B7B; 39} 40
試したこと
もしや高さ指定がないから上にあつまるのでは?と思い、
.cards .cardそれぞれにheight:autoを追加しました。
補足情報(FW/ツールのバージョンなど)
こちらがminigridのGitHubです。
https://github.com/henriquea/minigrid
こちらが該当サイトのURLです。
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー