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

gridプロパティは、CSS Grid Layout（グリッドレイアウト）における複数の関連プロパティの設定値を一括で保持するショートハンドプロパティです。このプロパティを使用することで、Webページのレイアウトを柔軟かつ効率的に定義できます。

具体的には、グリッドの行と列のサイズや配置、グリッドアイテムがどのように自動配置されるか、そしてグリッドの行と列の間の間隔といった、多岐にわたる設定を単一の宣言で指定することが可能です。例えば、grid-template-rows、grid-template-columns、grid-template-areas といったテンプレート定義のプロパティ、grid-auto-flow、grid-auto-rows、grid-auto-columns といった自動配置のプロパティ、さらには grid-row-gap や grid-column-gap（現在は gap プロパティに統合）といった間隔の設定などが含まれます。

個々のプロパティを別々に記述する手間を省き、CSSの記述量を大幅に削減できるため、コードの可読性を高め、メンテナンスを容易にします。複雑なレイアウト構造を持つWebアプリケーションやページの開発において、全体のレイアウトを一目で把握し、直感的に調整するための強力なツールとして機能します。システムエンジニアを目指す方々にとって、モダンなWebデザインと開発において必須となるレイアウト技術の理解を深める上で、この grid プロパティは非常に重要な概念です。

Copy
1.container {
2  grid: 1fr 1fr / 200px 1fr;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません