0

I have my grid layout with grid-template-columns: auto auto auto; meaning one row should have maximum 3 columns. So far so good, the next I want to achieve though is that when there is only a single (or two) column inside a row, I want it to fill the rest of the row, leaving no space behind. 

.grids {
  display: grid;
  grid-template-columns: auto auto auto;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}
<div class="grids">
  <div class="red">s</div>
  <div class="blue">s</div>
  <div class="yellow">s</div>
  <div class="yellow">a</div>
</div>
In this case, I want the last div (the one 'a' written inside) to be grown.
Masea
  • 103
  • 2
  • 10
  • not doable with a grid. Thats works fine with flexboxes though. – tacoshy Nov 13 '20 at 13:34
  • @tacoshy I have found lots of good stuff doable with grid display, especially that auto-fill stuff and else. I have to do this with grid anyway. – Masea Nov 13 '20 at 13:36
  • doesnt matter if you have to do it with a grid or how much good stuff you found, it is still not doable with a css-grid. the css-grid does not allow for a last row adjustment. autfoill only works for the entire grid not only the last row as this function does not exist. – tacoshy Nov 13 '20 at 13:38

0 Answers0