CSSグリッド入門

CSSグリッドは、要素を水平方向と垂直方向に同時に配置する方法です。 これはフレックスボックスと比較してより高度な手法ですが、習得はより複雑です。

グリッドを作成するには、要素のdisplayプロパティを grid値に設定する必要があります：

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
}

これにより、要素は2次元のグリッドに変換され、 要素は垂直方向（列）と水平方向（行）に配置されます。 列と行が交差する領域はセルと呼ばれます。

特別なプロパティを使用して、要素を行と列の両方に配置できるようになります。 これにより、例えば次のようなものを簡単に作成できます：

次のレッスンでは、まず列による要素の配置を学び、 次に行の学習に移り、その後すべてを統合します。