Center the bottom row when using grid auto-fit

[@KevinPowell]

Chris Brailsford kindly pointed out that, instead of using :has(), I could have used :nth-last-child instead! .item:nth-child(4n + 5):nth-last-child(2) as an example. ( mastodon.social/@cbrails/113437073508780351 ) - It definitely works, and is probably a little easier to understand the code, though if I ever used this in production, either way I'd leave some detailed comment on what's going on.

[@MercurySteel]

The pyramid idea and your solution to the problem are very clever It's so nice to see you interract with other inovative people like you who try to discover the full potential of CSS

[@stefanomic]

Apart from the fact the solution you came up with is exceptionally clever, this looks to me exactly like a problem that should be fixed by having a new spec coming in and implement a simple property like last-row as the preview suggested that would make all these workarounds not necessary.. 😅

[@StuartHomfray]

I was fighting with the Safari problem for a while - I ended up giving up on container-type and refactored the styling (which was most annoying!) Fantastic discovery of such simple fix - and thanks so much for sharing it! ❤

[@EricFressange]

Surprisingly l arrived at the same solution on a project. I've used mediaqueries and fixed column numbers but the logic was the same. ❤❤❤

[@FredtheWebGuyTV]

Thanks, Kevin! This actually helped solve an existing issue I was having with a project, so great timing! Also, thanks for being thorough as usual. I get so many channel recommendations from AI-generated or copy/paste tutorials with really bad ideas, including one where the creator actually did a demo of 'creating a website with MS Word'. Not kidding.

[@screamtwice]

I literally had this same issue of a grid but centered on the last row but still be auto, so I am deff going to have to try this, thank you Kevin!

[@CirTap]

your timing is impeccable: I need this for a CMS landing page where I had to generate several supporting data attribs and inline style vars in the template to make it work. it's less CSS code but it's not generic and also depends on template language and logic

[@joshuamitchell6204]

This is too good. Too many times I've had this requirements and have sighed while converting my nice grid container to a flexbox with flex wrap and flex-basis: calc() on all my flex items.

[@philipfisher8853]

Yo give as the full snippet. That sounds fire as well

[@pianochess1882]

@@philipfisher8853it’s literally in the video 1:10

[@izexi]

Magic numbers It's easier 2 use flex in those cases

[@RobertMcGovernTarasis]

This is always the problem with a lot of things. Heck consider using absolute positioning! I know I'm old (48), but I hope that we can get past needing to worry about magic numbers for a ton of things before I 🪦

[@tacyonmorales4566]

Wtf last nite i pass 2 hours trying to accomplish this. Thank you so much Kevin.

[@MuhamadAzizPrasetyo]

Thank you, Kevin!

[@timothyricks]

Thank you, Kevin! This is really helpful

[@hieunguyen-te5wi]

This method is also a way to create masonry layout using grid, by justing using that for vertical direction instead

[@thetakburger7928]

I recently found myself trying to animate a grid cell to make it grow on hover. The idea is that you have a grid with 3 columns and 6 cells so 2 rows. If I hover the cell 1, I want that cell to span 2 columns and two rows and have the other cells to fit around. Not that easy but doable. The issue is that apparently there is no possibility to animate the change of span of a cell. I tried to find workaround but the one I made working isn’t good enough. Would be a fun video/challenge

[@JamesPickering-s2l]

I've been using CSS grids since their inception, so depending on the use cases I'm dealing with and the framework I'm using. I utilise a combination of CSS grids, flex grids and Flexbox. Some plugins require styled components to work so pure CSS (in the stylesheet) isn't always possible.

[@D7460N]

Perfect timing! Thank you (again).

[@codersdude5513]

yes, thanks for good idea but is it sometime taking too much time thinking for making place centered the last line card item? i think it easiyer for taking csss flex for this type card centered, as you showing on starting your video,i don't think its make consitence when i making development this way it maked me thinking when and what card for i need to take calc. but thanks!

[@QwDragon]

I didn't get why do you need :has selector. Seems like &:has(:nth-child(3n + 5):last-child) > :nth-last-child(2) is actually the same element as :nth-child(3n + 4):nth-last-child(2) isn't it? I tried changing it in codepen (only one selector, not all of them) and it seems working fine.

[@ShawnSandy]

12:05 feels like way too much going on to be fun😮

[@codeme8016]

Isn't using Flex better in this case?

[@ukaszzbrozek6470]

Is it possible to do a for loop in SCSS to create those different rules based on number of columns ?

[@cryptobrarry]

My mind just blown 😅

[@falgoduss]

Great video! Slightly related, does anyone know how to get the common layout of a row of 4 items on large screen, then wrapping to 2 x 2, then vertical on mobile ... but without hard-coding it with media queries? Seems like flex and grid will always tend to wrap to 3 + 1.

[@PascalHorn]

Sometimes I also wish for Grid to have something like: If the "remainder line" of 3 columns would leave 2 items, then simply use the first two items in the first row and span them all over the line. So the first two items - which should be the most important in the grid anyway - should take up 1.5x the size in the grid. And the last row would be a clean 3 items. Which is possible, I've build it before with something like . grid { grid-template-columns: repeat(6, 1fr); } .grid > .item { grid-column: span 2; } .grid:has(>.item:nth-child(3n + 2):last-child()) > . item:nth-child(-n + 2) { grid-column: span 3; } But it looks just really messy and confusing. Would be easier to have a combined feature like in your thumbnail. Something like: grid--remainder: first span auto; grid-remainder: last center;

[@basilenordmann7356]

You don’t need to test in every browser. You need to test it in a browser, then in Safari

[@sogoyayo]

What about the min property for the max-width

[@deatho0ne587]

Do like this solution, but would be hard for future devs to maybe understand. Might be hard to see but at 2:35 the lowest box in the 7 group is wider than the others and rough guess that is not what you want. At 2:44 roughly (harder to catch this time) it is smaller than the other boxes. 6:13 at least does not have that size issue.

[@KevinPowell]

As for hard for devs to understand, it's definitely not the simplest thing, lol. I'd leave a detailed comment, but it's also something that is "set it and forget it", in general, and shouldn't require much tinkering. Still important to document how it's working, though!

[@deatho0ne587]

I 100% agree. There is a bit more to my thoughts of I would want to see it in use in PROD/QA to understand it, which sometimes can be very hard to do.

[@XCanG]

I think you could simplify your conditions so that you won't need comments: instead of writing "100px * 8 + 7rem" you could write "100px * 2 * 4 + 1rem * (2 * 4 - 1)" and basically repeat that for all other cases. In the end you only change number 4 here to number of your columns. It will make so much sense when there will be a bunch of them.

[@lahikahmed9253]

If you want to center the last row element using flexbox do this ⬇ element { display: flex: justify-content: center; flex-flow: row wrap; }

[@KevinPowell]

Yup, but you won't have equal columns with that unless the size of the elements is the same. That's what I did in the flexbox section early in the video, where I showed some of the limitations of that. (I used `place-content` instead of `justify-content`, but that's the shorthand for justify-content and align-content, so same result :) )

[@eioluseyi]

What was the shortcut you used at 15:39?

[@KevinPowell]

I think I made a mistake when I made a change there, and edited it out, so it looks like a magic keystroke 😆

[@eioluseyi]

@KevinPowell oh, loool 😅

[@__Nero__]

thanks for the colour blindness shoutout 👍, certainly helps #10:46

[@JamesPickering-s2l]

I need that font that styles the >= operator!

[@mohammademad2003]

It's cool but ther is alot of hard cooding I prefer using flix box for this And at the stage I need it to fill the hol coulmn I use a combination of min and max functions and midea query because it's usually I need it when there is on coulmn on the page this essayer to calculate

[@DeepTitanic]

I don't want my grid to add or remove more columns.. I want to set a number of grid columns for overall design layout and then have the content auto flow snapping to the the columns depending on available space

[@KevinPowell]

You could use this approach, but without any need of container queries, then. :has(:nth-child(x):last-child) { ... } - like I did here: codepen.io/kevinpowell/pen/abgQreW - I was getting a bit fancy with the layout, but that's the idea you'd use.

[@jenstornell]

This goes against my brain to how grid should work. I always see it like equal rows or cols like a chess board. Now my brain is broken. 😅

[@DeepStreamBits]

Isn't 3n + 4 the same as 3n + 1?

[@KevinPowell]

3n + 1 would include the first element. It'll start at 1, select it, then count each 3rd one after that. With the +4, we skip the first element :)

[@QwDragon]

If there is only 1 row, columns will be according actual number of elements, so no need to shift anything.

[@1Cygapb1]

Css layout dirty hacks. Like the good old times...

[@travholt]

I have encountered this a few times, and every time I've resorted to flex and just set max-widths where I go: "Eh, close enough!"

[@KayinAngel]

I could have used this literally four months ago

[@valaramchaudhary3216]

So... in conclusion use flex for this case

[@jhonztalk14]

got disappointed a bit, thought there's really 'last-row' or did i just not understand it? anyway, atleast theres a solution now for the problem I'm having where last row's items are stretching

[@LokiDaFerret]

This video demonstrates that just because you can do something doesn't mean that you should!! What a mess. Don't do this people. Sometimes you just have to tell the client we can't do that. Readability and maintainability are zero.

[@bn5055]

Crazy how this isn't a built in option tbh.

[@KevinPowell]

CSS isn't aware of when things are wrapping, or how many elements there are (or at least, at the moment, they're working on that)... combine that with it having to dynamically span columns based on both of those criteria, and it makes sense why it's not built-in 😊 - Now, it would definitely be nice to have, but at least it's possible!

[@RobertMcGovernTarasis]

@@KevinPowell "how many elements there are ...they're working on that" a) good to hear, but b) who? the CSS working group or just certain browsers companies? Just curious because of the whole masonry situation where two different companies see it in different spaces which, to a degree, is holding up progress.

[@irgendwaswoichguckenkann4626]

Trump ❤🎉

[@RobertMcGovernTarasis]

Any German I know, and its a fair few are not happy about that.