Kevin Powell - Community•13mo 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•13mo 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•13mo ago

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

MarkBoots•13mo ago

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

Jochem•13mo 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ë•13mo ago

It’s fairly ugly however

VinceAggrippino•13mo 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•13mo 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