Grid column not stretching across entire row

Question

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/

Try `.box1 { grid-column: 1 / -1; }` https://jsfiddle.net/vyx4jacm/2/ — Michael Benjamin, Aug 18 '17 at 21:27

skube · Accepted Answer · 2017-08-18T20:42:32.810

1

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.

edited Aug 18 '17 at 20:42

answered Aug 18 '17 at 20:36

skube

5,867
9
53
77

Ahh, that was the information I was mis-understand, thank you very much! – JosephStevens Aug 18 '17 at 20:39

Grid column not stretching across entire row

1 Answers1