【CSS Modules】grid-template-areasプロパティの使い方

grid-template-areasプロパティは、CSS Grid Layoutにおいて、グリッドコンテナの子要素であるグリッドアイテムの配置を視覚的に定義するために使用されるプロパティです。このプロパティは、親要素となるグリッドコンテナに指定され、文字列の形式でグリッドの領域に名前を割り当てます。

指定する文字列は、グリッドの行構造を表し、各行内のスペース区切りの単語が列構造を表します。例えば、"header header" "main sidebar"といった形式で、それぞれの単語がグリッドセルに対応する領域名となります。各グリッドアイテムは、grid-areaプロパティを使用して、ここで定義された領域名の一つに割り当てることができます。これにより、HTMLの構造や順序に関わらず、指定した名前の領域にアイテムを配置することが可能になります。

このプロパティを使用することで、レイアウトの全体像をCSSコード内で一目で把握でき、特に複雑なレイアウトの設計や変更が容易になります。同じ名前を複数のセルに指定することで、複数のセルにまたがる長方形の領域を作成できるため、ヘッダーやフッター、サイドバーといった共通のレイアウトパーツを直感的に配置できます。また、名前の代わりにピリオド（.）を使用することで、どのアイテムも配置されない空のセルを意図的に作成することも可能です。grid-template-areasプロパティは、グリッドレイアウトの視覚的な設計と管理を強力にサポートし、より直感的で保守しやすいウェブデザインを実現します。

Copy
1.grid-container {
2  grid-template-areas:
3    "header header header"
4    "nav    main   aside"
5    "footer footer footer";
6}

引数なし

引数はありません

戻り値なし

戻り値はありません