grid-column-start プロパティ
grid-column-start プロパティは、
グリッド（格子状レイアウト）内の要素の
列方向の開始位置を指定します。プロパティの値は
正の数または負の数になります。
正の数を指定すると、
要素の開始位置は左から右へと順に数えられます。
負の数を指定すると、要素は逆の順序、
つまり右から左に配置されます。
構文
セレクタ {
grid-column-start: 正の数または負の数;
}
例
グリッド内の要素に 開始位置を指定してみましょう：
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column-start: 1;
}
#elem2 {
grid-column-start: 2;
}
#elem3 {
grid-column-start: 3;
}
:
例
今度は grid-column-start プロパティに
負の数を指定してみましょう：
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column-start: -1;
}
#elem2 {
grid-column-start: -2;
}
#elem3 {
grid-column-start: -3;
}
:
例
次に、
grid-column-end プロパティを使って、
1番目、2番目、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プロパティ：
グリッド内の要素の列方向の終了位置を指定します -
grid-columnプロパティ：
グリッド内の要素の列方向の開始位置と終了位置を一括で指定します -
grid-template-columnsプロパティ：
グリッドの列の数と幅を指定します -
grid-auto-columnsプロパティ：
暗黙的なグリッドの列の数と幅を指定します
