0

Is it possible to use CSS grid to auto-fit the columns in a row to always take up the whole width?

I know this would be possible if you knew the number of columns, but is it possible with a dynamic number of columns?

Image for reference of what I'd like to achieve. column example image

This is what I have so far, but you can see that the lower row item doesn't take up all the row width.

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px;
  column-gap: 20px;
}

.grid {
border: solid #FF8181 1px;
display: grid;
grid-template-rows: 40px repeat(8, minmax(0, 1fr));
width: 200px;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.row-item {
background: #FFC555;
border: 1px solid #835600;
width: 100%;
height: 40px;
}

.item-1, .item-1 {
grid-row: 2 / span 1;
}

.item-2 {
grid-row: 6 / span 1;
font-size: 12px;
}
<div class='wrapper'>
  <div class='grid'>
    <div class='row-item item-1'></div>
    <div class='row-item item-1'></div>
    
    <div class='row-item item-2'>I'm too short</div>
  </div>

  <div class='grid'>
    <div class='row-item item-1'></div>
    <div class='row-item item-1'></div>
    <div class='row-item item-1'></div>
    
    <div class='row-item item-2'>Should be the whole width</div>
  </div>
</div>
Stuart Robinson
  • 1

3 Answers3

0

you can stretch a element in a grid over the whole width by using:

grid-column: 1 / all;

or

grid-column: 1 / -1;

unfortunately does it affect the other elements in the same grid.

A solution like "span last-column" doesnt exist yet, but is already discussed: https://github.com/w3c/csswg-drafts/issues/2402

Maybe they will implement the function soon. Good luck anyways

Lamphish
  • 11
  • 2
0

What I need doesn't exist yet. This does indeed look like the latest update:

A solution like "span last-column" doesnt exist yet, but is already discussed: https://github.com/w3c/csswg-drafts/issues/2402

I calculated overlapping grid items and rendered items in subgrids based on this answer: Group multiple overlapping timeblocks that may not have a direct overlap

Stuart Robinson
  • 1
0

With js its different.

  1. Find the grid
  2. Get the Style of the Grid
  3. Filter the Style of the Grid for grid-template-columns
  4. Set the Element grid-column to the number of columns

Your code will look like this: 

window.addEventListener("DOMContentLoaded",  function(){
    // find the elemen by the class and safe it as grid
    let grid = document.querySelector(".grid")
    // sage the style of the element
    const gridComputedStyle = window.getComputedStyle(grid);
    // get the grid-template-columns style poperty of the element and format them to a useful value
    const gridColumnCount = gridComputedStyle.getPropertyValue("grid-template-columns").split(" ").length
    // log for debug
    console.log(gridColumnCount)

    // set the column style of the element to the span of the variable
    document.getElementById("item-2").style.gridColumn = "1 / span " + gridColumnCount;
    // set the row style because it got overwritten by the line above 
    document.getElementById("item-2").style.gridRow = "6 / span " + gridColumnCount;
})

note that i have changed your html and css too:

html:

<div class='grid'>
    <div class='row-item item-1'></div>
    <div class='row-item item-1'></div>
    <div class='row-item item-1'></div>
    <div class="row-item" id="item-2">whole width</div>
</div>

Just deleted the wrapper for a better overview

CSS:

.grid {
  border: solid #FF8181 1px;
  display: grid;
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 300px;
  grid-template-columns: repeat(auto, minmax(0, 1fr));
  
}
.row-item {
  background: #FFC555;
  border: 1px solid #835600;
  width: 100%;
  height: 40px;
}
  
.item-1, .item-1 {
  grid-row: 2;
}
  
.item-2 {
  grid-row: 5;
  font-size: 12px;
}

I had to change the grid-template-value of grid from auto-fit to auto. Otherwise there would be a bug when counting the columns

Lamphish
  • 11
  • 2