【8/27まで】Udemyの人気コースが今なら1,200円から!!

【CSS Grid Layout】アイテムの行の高さを指定する「grid-template-rows」の使い方

【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;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です