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

grid-column-endプロパティは、CSS Grid Layoutにおいて、グリッドアイテムが占有する列方向の終了位置を指定するために使用されるプロパティです。このプロパティは、親要素がdisplay: grid;またはdisplay: inline-grid;で定義されたグリッドコンテナである場合に、その子要素であるグリッドアイテムの配置を制御します。具体的には、グリッドアイテムの右端、つまり列方向の終了線がどの位置になるかを、グリッド線の番号や名前、または隣接するグリッド線を基準としたスパンで指定します。

指定できる値には、数値、span <数>、そしてautoがあります。数値を指定する場合、それはグリッド線番号を表し、そのグリッド線でアイテムの占有が終了することを意味します。例えば、grid-column-end: 4;と設定すると、グリッドアイテムは4番目の列グリッド線で終了します。span <数>は、現在のグリッドアイテムが何列分のスペースを占有するかを指定し、grid-column-end: span 2;は、アイテムが2列分の幅を取って終了することを意味します。autoはデフォルト値であり、アイテムが1列分のスペースを自動的に占有するか、またはgrid-column-startプロパティと組み合わせて明示的に開始位置が指定されている場合はその開始位置から次の空いている列まで自動的に配置されます。

このプロパティは、grid-column-startプロパティと組み合わせて使用することで、グリッドアイテムの列方向の開始位置と終了位置を両方定義し、グリッド内での正確な配置を実現します。また、これら二つのプロパティを簡潔にまとめて記述できるショートハンドプロパティであるgrid-columnも存在します。grid-column-endを使用することで、レスポンシブなデザインや複雑なレイアウトにおいて、グリッドアイテムの配置を柔軟かつ効率的に制御できるようになります。

Copy
1.item {
2  grid-column-end: 3;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません