grid-column-end プロパティ

プロパティ grid-column-end は、グリッド内の要素の特定の列までの終了位置を設定します。プロパティの値は正の整数または負の整数です。正の数を指定すると、要素の終了位置は左から右に向かって数えられます。負の数を指定すると、要素は逆方向、つまり右から左に向かって配置されます。

grid-column-end プロパティの重要な注意点は、指定された列番号が要素の終了位置に含まれないことです。数値 3 を指定した場合、要素は最初と2番目の列のみを占有します。

構文

セレクター {
	grid-column-end: 正の整数または負の整数;
}

例

グリッド内の要素の終了位置を設定してみましょう:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

#elem1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 1;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 4;
}

例

今度は、プロパティ grid-column-start を使用して、最初の3つの要素を最初の行に配置し、 4番目の要素が2行目全体を占有するようにしましょう:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 3;
	grid-column-end: 4;
}
#elem4 {
	grid-column-start: 1;
	grid-column-end: 4;
}

例

隣接する要素が占有する列が重なると、後続の各要素は1行下に移動します。この特性を利用して、最初の要素を1行目、2番目の要素を2行目、 3番目と4番目の要素を3行目に配置してみましょう:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 4;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem4 {
	grid-column-start: 3;
	grid-column-end: 4;
}

例

次に、grid-column-end プロパティに負の数を指定してみましょう:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

#elem1 {
	grid-column-start: 1;
	grid-column-end: -4;
}
#elem2 {
	grid-column-start: 1;
	grid-column-end: -3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: -2;
}

grid-column-end プロパティ

構文

例

例

例

例

関連項目