Kevin Powell - Community•4w ago

Grid auto-fit layout getting messed up around new column breakpoints

I'm trying to create a grid layout (Just for fun as after a question on reddit got me wondering if it's possible) The criteria I'm trying to achieve are:
1) The grid is always 'full', as in regardless of number of children the last row is always full.
2) The columns never exceed a specific width.
3) All happens automatically with no need for media or container queries.
4) A purely CSS solution.
For the 'fullness' I have a 'highlight' element that will span multiple columns as needed to push subsequent children to fill the last row (In the event no 'highlight' element is selected the first element takes this role.
For the width capping I am increasing padding on the parent when there isn't room for the next column to be added but current columns would be exceeding max-width.
I roughly have it working here: https://codepen.io/NeilSchulz/pen/JoGapRj (In Chrome at least, and I believe it should work in Safari, but not in Firefox - I think there are Firefox work-arounds but I haven't added as it gets complex and I only wanted a bare-bones version until it was working)
But I shrink/grow the window it works as intended for most widths, but there is a short point above/below each breakpoint where is glitches. The previous column layout is maintained for a few px, or the increased padding doesn't work, but jumps back in with a slightly greater screensize change.
Just wondering (hoping) if anyone can see where I'm going wrong! (I've added notes to the CSS in the codepen to hopefully explain what I was trying to do!)

Neil Schulz

CodePen

Untitled

...

6 Replies

MarkBoots•3w ago

the math is a bit off. maybe not accounting for the amount of gaps? i was not able to look over all the maths, but thats the first thing that comes to mind

MarkBoots•3w ago

figure[data-highlight="highlight"]::after{
  white-space: pre; /* or pre-wrap */
  counter-reset:
    column_count var(--column_count)
    min_items_per_column var(--min_items_per_column)
    max_items_per_column var(--max_items_per_column)
    number_of_orphans var(--number_of_orphans)
    empty_cells var(--empty_cells)
/*     padding_inline var(--padding_inline) */
    ;
    
  content:
    'column_count: ' counter(column_count) '\A'
    'min_items_per_column: ' counter(min_items_per_column) '\A'
    'max_items_per_column: ' counter(max_items_per_column) '\A'
    'number_of_orphans: ' counter(number_of_orphans) '\A'
    'empty_cells: ' counter(empty_cells) '\A'
/*     'padding_inline: ' counter(padding_inline) '\A' */
    ;
}

figure[data-highlight="highlight"]::after{
  white-space: pre; /* or pre-wrap */
  counter-reset:
    column_count var(--column_count)
    min_items_per_column var(--min_items_per_column)
    max_items_per_column var(--max_items_per_column)
    number_of_orphans var(--number_of_orphans)
    empty_cells var(--empty_cells)
/*     padding_inline var(--padding_inline) */
    ;
    
  content:
    'column_count: ' counter(column_count) '\A'
    'min_items_per_column: ' counter(min_items_per_column) '\A'
    'max_items_per_column: ' counter(max_items_per_column) '\A'
    'number_of_orphans: ' counter(number_of_orphans) '\A'
    'empty_cells: ' counter(empty_cells) '\A'
/*     'padding_inline: ' counter(padding_inline) '\A' */
    ;
}

here the code that will show the the calculated results. think that might help in the trouble shooting

NeilOP•3w ago

Awesome, thanks, only on mobile at the moment but will look into this when back at computer

NeilOP•3w ago

With a little maths tweaking I mostly have it working, there is just one remaining glitch at screens between 580px and 620px there are two columns, but it thinks there is one so it doesn't trigger the two column span of the highlighted element to keep the grid full. Nothing I've tried fixes this (Or does but then messes up something else!)
Any ideas gratefully received

MarkBoots•3w ago

--column_count: max(1, round(down, 100cqi / ( (2 * var(--gap)) + var(--column_min_width) ) ) );
I think your logic here is a bit of. It seems you account for 2 gaps per column? Not sure rn how to tackle that tho

NeilOP•3w ago

I did originally have it as one gap, ended up with two after stumbling around trying changing different things to see if I could eliminate which part was messing up - And no idea why but doubling the gap fixed it for greater numbers of columns... I assume maybe since min padding uses the gap variable this pushes the width accounted for a little closer to what it is. But since it only left me with the one to two column breakpoint being a problem I kept it
If padding is part of 100cqw then the total width lost to padding and gaps is at least columns + one, rather than the assumed columns - 1, although obviosuly I have to best guess the amount and rely on round() since I can't know the gaps total until I know column count.
I'm starting to think given it will only ever be an estimate that is rounded it might not be possible to get it perfected.

Gaming

Programming

Grid auto-fit layout getting messed up around new column breakpoints

Did you find this page helpful?