【CSS Grid Layout】アイテムの行の高さを指定する「grid-template-rows」の使い方
grid-template-rowsの使い方を解説します。
grid-template-rowsを使うことでアイテムの行の高さを指定することができます。
grid-template-rowsを使用することで行の高さを指定することができます。
複数行がる場合は、半角スペースで区切って指定します。
以下の例は1行目を150px、2行目を100px、3行目を50pxとし、4行目以降は30pxを指定しています。
See the Pen
grid-template-rows by shiakisudev (@shiakisu)
on CodePen.
HTML
<div class="container">
<div>150px</div>
<div>100px</div>
<div>50px</div>
<div>30px</div>
<div>30px</div>
<div>30px</div>
</div>
CSS
.container{
display:grid;
grid-template-rows:150px 100px 50px repeat(3,30px);
}
.container div{
background-color:aquamarine;
border:1px solid black;
}
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！