Lets say I have a CSS grid where each row is comprised of 4 columns
.grid{ grid-template-columns: 1fr 1fr 1fr 1fr; }Is it possible with CSS to specify that, for any row with less than 4 items, the items in that row are evenly flexed across the row? For example, if only two children are present in grid, those items will end up being 50% of the width of the parent? Or, if there are 5 items, the first row has 4 elements consuming 25% of the width, and the second row has the fifth element consuming 100% of the width?
Here is an example of how I would like the grid to work (though in this case I've used flex to demonstrate)
Please note, for the sake of this question, the column and item counts are dynamic. I'd like a solution that works with any number of columns, rows, and items.
.box{ background-color:red; padding: 20px; border: solid 1px black; flex:1;}.grid-1{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px;}.grid-2{ display:flex; gap: 8px;}<h1>Grid with 4 columns and 4 items</h1><div class="grid-1"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div><h1>Grid with 4 columns and 3 items</h1><div class="grid-1"><div class="box"></div><div class="box"></div><div class="box"></div></div><h1>How to make grid items fill row when items quantity is less than column count?</h1><div class="grid-2"><div class="box"></div><div class="box"></div><div class="box"></div></div>