Chapter 04無料公開

CSSグリッドの超基礎

Flexboxとの構造の違いと、共通概念

簡単にCSSグリッドとFlexboxの構造の違いを説明すると、

Flexbox Gridレイアウト
1つの軸(flex-direction で、アイテムを縦方向か横方向かどちらかを決める構造 横(row: 行)縦(column: 列)2つの軸で、アイテムを縦方向か横方向か決める構造

です。

「rowとcolumnの、どちらが縦方向と横方向で...」と考えると混乱しやすいので、先のグリッドラインのチャプターで覚え方を紹介します。
今は2方向の軸、rowとcolumnがあることを、情報として読んでおくところまででOKです。

対照的に、共通する考え方を簡単に説明すると、

  • 親要素(コンテナー)がある
  • 子要素(アイテム)がある

です。

container-and-item

マークアプ言語シリーズ: Lesson 4 並列、Flexboxの、「基本構文 1: Flexコンテナーとアイテム」(無料公開部分)で、この構造を学習しましたね。

上記の、特にFlexboxとCSSグリッドの構造の違いについては、詳しくはこれから学習していきます。