1次元か2次元か

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

CSSレイアウト入門 - 1次元か2次元か

並べたい方向が1つなら Flexbox

Flexbox は中身のサイズが主役です。子の幅がばらばらでも、余ったぶんを分け合っておさまります。Grid は入れ物のサイズが主役で、先にマス目を決めてから中身を流し込むので、列がぴたりとそろいます。

このページにはすでに両方が入っています。趣味リストは Flexbox、作品リストは Grid です。

同じページの中で両方を使ってかまいません。並べたい形のほうで選びます。

/* 一列に並べたい */
.site-nav ul {
  display: flex;
}

/* 行と列をそろえたい */
.work-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

1 / 5

← → キーでも送れます