くまだどうも、くまだです。
grid-rowとgrid-columnについてのあれこれ。
grid-rowとgrid-column
grid-rowとgrid-columnはアイテムをグリッドのどのエリアに配置するか指定することができます。
例えば以下のような記述を初期配置とします。
<div class="box">
<span class="item --1">a</span>
<span class="item --2">b</span>
<span class="item --3">c</span>
<span class="item --4">d</span>
<span class="item --5 is-select">e</span>
<span class="item --6">f</span>
<span class="item --7">g</span>
<span class="item --8">h</span>
<span class="item --9">i</span>
</div>.box {
padding: 50px;
display: grid;
grid-template:
"a b c" 1fr
"d e f" 1fr
"g h i" 1fr /1fr 1fr 1fr
;
}
.item {
padding: 10px 20px;
border: 1px solid black;
display: inline-flex;
align-items: center;
justify-content: center;
}
.item.--1 {
grid-area: a;
}
.item.--2 {
grid-area: b;
}
.item.--3 {
grid-area: c;
}
.item.--4 {
grid-area: d;
}
.item.--5 {
grid-area: e;
}
.item.--6 {
grid-area: f;
}
.item.--7 {
grid-area: g;
}
.item.--8 {
grid-area: h;
}
.item.--9 {
grid-area: i;
}
.item.is-select {
background-color: orange;
z-index: 1;
}
オレンジ色の要素の部分を、以下の記述にして配置を変更します。中央にある「e」の要素を、「c」と「f」の領域のほうに配置します。
.item.is-select {
background-color: orange;
z-index: 1;
grid-row: 1 / 3;
grid-column: 3;
}
grid-rowが行のラインの位置、grid-columnが列のラインの位置になります。
ラインのイメージとしては、以下のようになります。
/* ↓↓↓ 列ライン（grid-column)
1 2 3 4
1 -|---|---|---|-
| a | b | c |
2 -|---|---|---|-
| d | e | f |
3 -|---|---|---|-
| g | h | i |
4 -|---|---|---|-
→→→
行ライン（grid-row)
*/
grid-row: 1 / 3;が行ラインの1~3までの領域になります。
grid-rowは、grid-row-startとgrid-row-endの省略した書き方になります。
なので、grid-row: 1 / 3;は以下と同じ意味になります。
- grid-row-start が1 （行ライン1スタート）
- grid-row-endが3（行ライン3エンド）
/*
1 2 3 4
1 -|---|---|---|- grid-row: 1 / 3;ここから
| a | b | c |
2 -|---|---|---|-
| d | e | f |
3 -|---|---|---|- grid-row: 1 / 3;ここまで
| g | h | i |
4 -|---|---|---|-
→→→
行ライン（grid-row)
*/grid-column: 3;の場合は、列ラインの3になります。
grid-columnは、grid-column-startとgrid-column-endの省略した書き方になります。
なので、grid-column: 3;は以下と同じ意味になります。
- grid-row-start が3 （列ライン3スタート）
- grid-row-endがauto
/* ↓↓↓ 列ライン（grid-column)
grid-column: 3は3~4の間の領域
↓ ↓
1 2 3 4
1 -|---|---|---|-
| a | b | c |
2 -|---|---|---|-
| d | e | f |
3 -|---|---|---|-
| g | h | i |
4 -|---|---|---|-
*/
grid-rowやgrid-columnにspanを使った書き方もあります。
grid-row: 1 / span 3;は行ライン1から始まり、3つ先のラインまで、という指定になります。
.item.is-select {
background-color: orange;
z-index: 1;
grid-row: 1 / span 3;
grid-column: 3;
}
/*
1 2 3 4
1 -|---|---|---|- grid-row: 1 / span 3;ここからスタート
| a | b | c |
2 -|---|---|---|-
| d | e | f |
3 -|---|---|---|-
| g | h | i |
4 -|---|---|---|- grid-row: 1 / span 3; スタートの3つ先なのでここまで
→→→
行ライン（grid-row)
*/ここまで読んでくださりありがとうございました。