Kevin Powell - Community•14mo ago

CSS challenge - grid/flex fill space

Hey everyone! 👋 I've stumbled upon an interesting CSS challenge. I've attached an image showing the desired look. If any CSS wizards have some time and would like to give it a shot, I'd greatly appreciate any insights or advice. Thanks in advance! 🙏

7 Replies

MarkBoots•14mo ago

hmm. normally i wouldnt advise this, but i think using a float right on the white box is the easiest. it depends a bit on what kind of content is going in all your boxes --- thinking of it, probably that wont work. the boxes on the left will go behind the floated box. where did you find this challenge? And are you supposed to do it solely with css?

DeWill•14mo ago

We can use grid, with white box having height of 2 row & red box have width 2 column

MarkBoots•14mo ago

yea, but i think he wants it dynamicallly. only 2 columns for red if there is space for it

Jochem•14mo ago

I think there's even an argument to be made for float being the right solution here it is after all made to have content flow around it

Zoë•14mo ago

It’s fairly ugly however

VinceAggrippino•14mo ago

I see a main section with display: flex and two subsections with display: grid and a grid-template-rows setting that uses min-content. The 3rd child of the second subsection has a different grid-column-end. https://codepen.io/VAggrippino/pen/mdvrEWO It doesn't react to the height of the white box as MarkBoots suggested. I often don't use shorthand properties while I'm trying to figure something out, so this one has all the grid-row/column-start/end properties broken down. The CSS could be a lot shorter than this.

MarkBoots•14mo ago

with js you could figure out if the 3rd child position is below the white box, if so, then change the grid-colmn-end

const outers = document.querySelectorAll(".outer");
outers.forEach(outer => {
    const third = outer.querySelector(".dynamic:nth-of-type(3)");
    const white = outer.querySelector(".dynamic:nth-of-type(4)");
    if(third.offsetTop > white.offsetHeight)
        third.style.gridColumnEnd = 3;
})

const outers = document.querySelectorAll(".outer");
outers.forEach(outer => {
    const third = outer.querySelector(".dynamic:nth-of-type(3)");
    const white = outer.querySelector(".dynamic:nth-of-type(4)");
    if(third.offsetTop > white.offsetHeight)
        third.style.gridColumnEnd = 3;
})

Gaming

Programming

CSS challenge - grid/flex fill space