Grid column Start and end without specifying start or end

0
votes

I have a class, lets call it .col3 and it is a grid item inside a div with the class of .container

Container has grid-template-columns: 25% 25% 25% 25%

I want the class .col3 to span 3 columns. I know that normally I could use:

.col3{
   grid-column-start: 1;
   grid-column-end: 4;
}

but that does not specify the times when I want it to start on col 2 and go to the end. Is there a universal "make this class span 3 columns" that I could use?

1
htmlcsscss-grid
grid-column-end: -1;, or grid-colunm; span 3 - Temani Afif

1 Answers

1
votes

Is there a universal "make this class span 3 columns" that I could use?

Yes

grid-column: span 3;

MDN

span

Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge.

.col3 {
  grid-column: span 3;
  height: 50px;
  background: blue;
}

.col2 {
  grid-column: 2 / span 2;
  height: 50px;
  background: red;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 2px solid green;
}
<div class="grid">
  <div class="col2"></div>
  <div class="col3"></div>
  <div>

Alternatively, specifying the end as -1 will span to the last grid-column track.