【CSS Grid Layout】列数とアイテムの大きさを指定する「grid-template-columns」の使い方

grid-template-columnsの使い方を解説します。
grid-template-columnsを使うことで列数とアイテムの大きさを指定することができます。

固定幅でアイテムの大きさを指定する

例えばgrid-template-columns:50px 50px 50px;と指定するとアイテムを3列で50pxずつ表示することができます。

HTML

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

CSS

.container{
  display:grid;
  grid-template-columns:50px 50px 50px;
}

.container div{
  background-color:aquamarine;
  border:1px solid black;
}

6列にしたい場合は以下のように半角スペースで区切り6個分記述します。

CSS

.container{
  display:grid;
  grid-template-columns:50px 50px 50px 50px 50px 50px;
}

列数分、半角スペースで区切って書くのは可読性がよくありません。
初見で何列なのかわかり辛いです。
ということで以下のようにrepeatを用いることで完結に記述することが出来ます。

CSS

.container{
  display:grid;
  grid-template-columns:repeat(6,50px);
}

frという単位を使用することでアイテムの大きさを親要素に対する比率（割合）で指定することができます。
frはfraction（比率）という意味です。
3列で画面幅に対して1:1:1の割合にしたい場合は以下のように記述します。

HTML

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

CSS

.container{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
}

.container div{
  background-color:aquamarine;
  border:1px solid black;
}

以下のようにrepeatによる指定も可能です。

CSS

.container{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！