Index

`Grid`レイアウトとは

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

CSS グリッドレイアウトは、二次元グリッドシステムを CSS にもたらします。

グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN

Flexboxなどは方向を指定して折り返しながらレイアウトを組んでいきます。これを一次元レイアウトと言います。

一方でGridレイアウトは二次元レイアウトと言う一つ一つの要素が独立しており、それぞれを指定して配置できるようなレイアウトです。

用途としては、方眼のように同じ大きさの正方形や長方形に分割して組み合わせながら要素の大きさから配置を指定したい場合など。

画像を何枚も配置する様なサイトが使いやすいです。

参考サイト

Beautiful Free Images & Pictures | Unsplash

GridでもいくつかGrid内で利用される概念があるのでその中でも基本的な内容を解説していきます。