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

grid-rowプロパティは、CSS Grid Layoutにおいて、グリッドコンテナー内の特定のグリッドアイテムが占める行の開始位置と終了位置を定義するために使用されるプロパティです。このプロパティは、grid-row-startプロパティとgrid-row-endプロパティの値をまとめて設定するためのショートハンド（短縮形）プロパティとして機能します。

値を指定する際には、grid-row-startに相当する値とgrid-row-endに相当する値をスラッシュ記号（/）で区切って記述します。例えば、grid-row: 1 / 3;と指定すると、そのグリッドアイテムは1行目のグリッドラインから始まり、3行目のグリッドラインの手前まで（つまり1行目と2行目）を占めることになります。

指定できる値には、グリッドラインの番号（数値）、spanキーワードとその後に続く数値（例: span 2で2行分占める）、または開発者が任意で定義した名前付きグリッドライン（例: header-start）などがあります。これらの値を組み合わせることで、グリッドアイテムを行方向にどのように配置するかを柔軟に制御できます。

grid-rowプロパティを使用することで、複数の行関連プロパティを一行で簡潔に記述することができ、CSSコードの可読性を向上させるとともに、効率的なグリッドレイアウトの設計に役立ちます。CSS Modules環境においても、CSS Grid Layoutの標準的な機能としてこのプロパティを利用できます。

Copy
1.item {
2  grid-row: 1 / 3;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません