Kevin Powell - Community•3mo ago

Extende colums to fill empty row with grid css

Hi everyone! I set a basic grid with only two columns, 1fr each. I would like to know if it's possible to extend automatically the size of the green box, that I draw in the example image, to fill the gap in the second row, first column. Is it possible?

29 Replies

ἔρως•3mo ago

i think you can use minmax(1f, auto) no, doesn't work

FryBlasterOP•3mo ago

No, it doesn't Because I have a situation where under the green box it could be empty or filled with another content (let's call it a box, for semplicity sake). Same thing viceversa, on the right column

Chris Bolson•3mo ago

Does your grid only ever have 4 "boxes"?

FryBlasterOP•3mo ago

Yeah

ἔρως•3mo ago

maybe some grid area funkery will do the trick

FryBlasterOP•3mo ago

Mh, the idea is to use that solution, but doesn't seems so flexible to me But yeah, I will never have more than 4 boxes (or at least for now)

ἔρως•3mo ago

but what exactly are you trying to do?

Chris Bolson•3mo ago

Is the flow automatic (natural) or are you specifically defining the contents of each cell? If you want a natural flow, you could do somethig like this to detect of there are only 3 items. This will tell the first "box" to span 2 rows and push the 3rd box contents onto the 4th cell:

/*  If 3rd element is the last element */
.grid:has(div:last-child:nth-child(3)) > div:first-child{
    grid-row: 1 /  3;
}

/*  If 3rd element is the last element */
.grid:has(div:last-child:nth-child(3)) > div:first-child{
    grid-row: 1 /  3;
}

However if you are specifically defining what goes where, this will probably need to be done programatically

FryBlasterOP•3mo ago

The goal is that I can have this dynamic grid where sometimes, based on some results, I can have 1, 2, 3 or 4 boxes. So I want to dynamically sizing these boxes to fill the entire grid

Chris Bolson•3mo ago

Alternatively you could tell the first child to always span the 2 rows unless the container has a 4th item

div:first-child{
  background-color: green;
  grid-row: 1 /  3;
}
/*  If grid has 4th child */
.grid:has(:nth-last-child(4)) :first-child{
    grid-row: 1 /  2;
}

div:first-child{
  background-color: green;
  grid-row: 1 /  3;
}
/*  If grid has 4th child */
.grid:has(:nth-last-child(4)) :first-child{
    grid-row: 1 /  2;
}

FryBlasterOP•3mo ago

Mhh, seems it doesn't work

Chris Bolson•3mo ago

<section class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</section>

<section class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</section>

.grid{
    width:800px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap:1rem;
    height:400px;

    & > *{
      /* just for styling - not relevant--*/
        background: #EEE;
        min-height: 200px;
        display: grid;
        place-content: center;
    }
    :first-child{
        background-color: green;
        grid-row: 1 /  3; /* span all rows by default */
        grid-column: 1 /  3; /* span all columns by default */
    }
}
/*  If grid last item is 2nd or 3rd child  - span 1 column and 2 rows*/
.grid:has(:nth-last-child(2), :nth-last-child(3)) :first-child {
    grid-column: 1 / 2;
}

/*  If grid has 4th child  - just span first column and row */
.grid:has(:nth-last-child(4)) :first-child{
    grid-row: 1 /  2;
}

.grid{
    width:800px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap:1rem;
    height:400px;

    & > *{
      /* just for styling - not relevant--*/
        background: #EEE;
        min-height: 200px;
        display: grid;
        place-content: center;
    }
    :first-child{
        background-color: green;
        grid-row: 1 /  3; /* span all rows by default */
        grid-column: 1 /  3; /* span all columns by default */
    }
}
/*  If grid last item is 2nd or 3rd child  - span 1 column and 2 rows*/
.grid:has(:nth-last-child(2), :nth-last-child(3)) :first-child {
    grid-column: 1 / 2;
}

/*  If grid has 4th child  - just span first column and row */
.grid:has(:nth-last-child(4)) :first-child{
    grid-row: 1 /  2;
}

https://codepen.io/cbolson/pen/azOjJXZ

ἔρως•3mo ago

so, how many columns and rows do you want for 1, 2, 3 and 4 children?

FryBlasterOP•3mo ago

2 columns and 2 rows

ἔρως•3mo ago

so, always 2 columns and 2 rows?

FryBlasterOP•3mo ago

Yep

ἔρως•3mo ago

all the same size?

FryBlasterOP•3mo ago

No, they may vary

ἔρως•3mo ago

and vary based on what?

Chris Bolson•3mo ago

Can you share the code in a codepen or similar to help us understand?

FryBlasterOP•3mo ago

Based on the content As soon as I can yes, I'm not working on my personal pc rn

FryBlasterOP•3mo ago

Oh eventyally I found this interesting article and I made it works https://www.matuzo.at/blog/2022/counting-children

Manuel Matuzovic

Parents counting children in CSS - Manuel Matuzovic

Using :has() to select parent elements that have a specific number of children.

ἔρως•3mo ago

so, not based on content then?

FryBlasterOP•3mo ago

Mh yeah, maybe I was wrong, sorry. The idea is to fill the area of the grid, indipendently from the size of the content So If a I have 2x2 grid and I have only 3 boxes, the first one should occupy first colum and the first half of the 2 row, the rest of the items the leftover available space, respectively the second column first row, second column second half of the second row

ἔρως•3mo ago

sounds like you need flexbox add display: flex to the parent, then add flex: 1 0 50% to the children 1 child: takes 100% of the width 2 children: 50/50 3 children: 50/50 and then 100% 4 children: 50/50 and 50/50 btw, add flex-wrap: wrap to the parent

ἔρως•3mo ago

https://jsfiddle.net/rm94uqax/

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

ἔρως•3mo ago

there, an example of it working

FryBlasterOP•3mo ago

Thx, I'll give it a try for sure

ἔρως•3mo ago

you're welcome

Gaming

Programming

Extende colums to fill empty row with grid css

Did you find this page helpful?