先にマス目を宣言する

CSSレイアウト入門 / 全 5 枚

親に grid と列の定義を書く

display の grid だけでは縦1列のままです。列をいくつに分けるかを grid-template-columns で伝えて、はじめてマス目ができます。

.work-list {

display: grid;

display: gridここがグリッドコンテナ

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

grid-template-columns列をいくつに分けるか

}

.work-list {

display: grid;

ここがグリッドコンテナ

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

列をいくつに分けるか

}

子要素には何も書きません。並べ方を決めるのは親の仕事、という考え方は Flexbox とまったく同じです。

1 / 5

← → キーでも送れます