Span a grid item across the entire css grid

When using css grid you might want an item to span item to span across the entire grid even when that grid has many columns.

Grid with many columns looks like this:

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

You could certainly just use grid-column: span 5 but if the number of columns changes then you aren't going across the entire screen. To span a grid item across the entire css grid regardless of number of columns use the / operator and the index of the last column -1:

.item {
  grid-column: 1 / -1;
}

Tweet