JosephStevens JosephStevens - 2 months ago 9
CSS Question

Css grid odd behavior

I have the following html in my html body

<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>


with this as an inline-style

.wrapper {
display: grid;
grid-template-columns: 1fr 7fr;
}
.box1 {
grid-column: 1 / 2;
grid-row: 1 / 1;
background-color: red;
}
.box2 {
grid-column: 1 / 1;
grid-row: 2 / 2;
background-color: blue;
}
.box3 {
grid-column: 2 / 2;
grid-row: 2 / 2;
background-color: green;
}


This might be not understanding the spec, but could anyone explain as to why I have to change box1 from

grid-column: 1 / 2;


to

grid-column: 1 / 3;


In order to make div1 span accross both columns?
See https://jsfiddle.net/vyx4jacm/

Answer Source

grid-column is short for grid-column-start and grid-column-end. The second number of grid-column is your ending grid line.

Since you only specified 2 columns (via grid-template-columns) it means there would be 2 column tracks and 3 column grid lines. Thus to span all of them you require your grid-column-end value to be 3, not 2.