CSSグリッド入門

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

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

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

#parent {
	display: grid;
}

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

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

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