グリッドレイアウトの基本特性と列テンプレート

グリッドレイアウトの基本

3列、均等幅のグリッド。最初に列数、列幅をテンプレートとして設定する。

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

One

Two

Three

Four

Five

横に並ぶグリッドアイテムの高さは自動的に揃う

One

Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nunc leo, pulvinar sit amet sapien vel, tempus porta purus.

Three

Four

Five

列テンプレートの設定方法

列の幅を変える

2列。右列の幅は左列の2倍。

grid-template-columns: 1fr 2fr;

One

Two

Three

Four

Five

一部の列幅を固定

左列を300pxに固定、右列は自動。

grid-template-columns: 300px auto;

One

Two

一部の列幅を固定、残りを均等幅に

1列目を50pxに固定、2列目、3列目は1fr。

grid-template-columns: 50px 1fr 1fr;

One

Two

Three