Categories: HTML&CSS

【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がオススメ!同僚に差をつけよう!

issiki_wp