【CSS Modules】grid-area省略形プロパティの使い方

grid-areaプロパティは、CSS Grid Layoutにおいて、グリッドアイテムが占める領域の位置とサイズを保持するプロパティです。このプロパティは、グリッドコンテナ内に配置される個々のグリッドアイテムが、どのグリッドラインから始まり、どのグリッドラインで終わるかを一度に指定できるショートハンドプロパティとして機能します。具体的には、grid-row-start（行の開始ライン）、grid-column-start（列の開始ライン）、grid-row-end（行の終了ライン）、grid-column-end（列の終了ライン）という4つの個別プロパティの値を、スラッシュ記号 / で区切ってまとめて設定します。

値の指定順序は、[行の開始ライン] / [列の開始ライン] / [行の終了ライン] / [列の終了ライン] となります。例えば、grid-area: 1 / 2 / 3 / 4; と指定すると、そのグリッドアイテムは、1行目から始まり3行目で終わり、2列目から始まり4列目で終わる領域に配置されます。また、grid-template-areasプロパティで事前に定義された名前付きグリッドエリアがある場合は、そのエリア名を直接指定することも可能です。この場合、grid-area: header; のように記述するだけで、該当する名前の領域全体にアイテムを配置できます。

grid-areaプロパティは、グリッドレイアウトの記述を非常に簡潔にし、コードの可読性を高めるのに役立ちます。特に、多数のグリッドアイテムを持つ複雑なレイアウトを構築する際に、複数のプロパティを個別に設定する手間を省き、効率的なCSS記述を実現します。グリッドラインの番号や名前を使用することで、直感的かつ柔軟なアイテム配置が可能となり、レスポンシブデザインの設計においても、その領域指定の簡潔さが大きな利点となります。

Copy
1.element {
2  grid-area: 1 / 2 / 3 / 4;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません