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

grid-row-endプロパティは、CSSグリッドレイアウトにおいて、グリッドアイテムが占める行の終了位置を制御するための値を保持するプロパティです。このプロパティは、親要素にdisplay: gridまたはdisplay: inline-gridが設定されている場合に、その子要素であるグリッドアイテムの縦方向の配置を詳細に調整するために用いられます。

具体的には、グリッドアイテムがどのグリッド行で終了するかを指定することで、アイテムが縦方向にどの程度の範囲を占めるかを決定します。設定できる値にはいくつか種類があります。autoを指定すると、アイテムは自動的に配置されるか、他のプロパティによって暗黙的に決定されます。数値を指定した場合は、その数値に対応するグリッド線の番号でアイテムの終了位置を指定します。例えば、3と指定すれば、アイテムは3番目のグリッド線で終了します。

また、spanキーワードと数値を組み合わせてspan <number>と指定することも可能です。これは、アイテムが開始位置から指定された行数分だけ広がることを意味します。例えば、span 2は、アイテムが2行分のスペースを占めるように設定します。グリッド線に名前が付けられている場合には、その名前を直接指定することもできます。

このプロパティを使用することで、開発者はグリッドレイアウトにおけるアイテムの縦方向の配置を非常に柔軟に制御できます。grid-row-startプロパティと組み合わせることで、グリッドアイテムが行方向でどこから始まり、どこで終わるかを完全に定義し、複雑なデザイン要件を満たすことが可能になります。これは、レスポンシブなウェブデザインや、コンテンツの視覚的な整理において非常に強力なツールとなります。

Copy
1grid-row-end: 3;

引数なし

引数はありません

戻り値なし

戻り値はありません