Center last row in grid
As the title suggests, i have a grid with 4 columns and some rows, but im left with a single item in the last row, and i would like to center it, so the last row is in the middle until its a complete 4 item row if that makes sense, i have done it with flex wrap before, but i would like to use grid
137 Replies
have you tried
margin: auto?doesnt do anything
this is what it looks like rn
i want to center the last row
i dont have a class for the rows either since im mapping over the grid items
and i dont have a gridæ-template-rows either
i think what you want is easier with flex
use something like
flex: 0 0 25%That would stretch the last item, not center it
no, it can't stretch
no grow, no shrink
Oh, right. Derp
But then they all will always be 25% of the container's width even on small screens when I would assume that you want it to be dyanmic in size
Could do a
:last-child selector to target only that one…#<Sentry::ErrorEvent:0x00007fee73b32018> - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
But would need a few
@media queries to prevent it from making trouble with various screen sizesyou will need a different selector for if it is 1, 2 or 3 at the end, to center those
but with a grid, you can't do that
you can't do this
The lack of stacking on that make me sad
you will have to have the content be in a different element, and the wrapper do stuff
it's an exercise
with some touches, it will be good
... lots of touches ...
but it works
You can make it automatically wrap when there's not enough space and still have the centered item at the end
Love how the title is
Sentry::ErrorEvent lol🤣 what?
i don't have that!
im using percentage
it will never wrap
I know I'm saying it for them
yeah, but it is an important detail to share
🤣
Doesnt grid also have align-items center?
it does, btu only within the grid
Shouldnt that center that item?
within the grid cell, yes
but he wants it outside the grid cell
This looks like one grid tho
dude, that's what im saying
I don't get but I suppose it doesnt matter.
it matters a lot
the element has to leave the grid to be centered within the free space
I would treat these items as one grid, with align item center in grid all the items inside the grid would be centered.
but he wants to center it within the available space, outside of the grid
like this
He could use grid-template-areas
It still looks inside the grid to me.
but it's not
it's literally in the middle
I mean technically it's not even a grid anymore, it's a flexbox now.
but if you draw grid lines, you will see that the middle one goes through the center of the element
doesnt work
it would work, with a ton of work
i dont wanna use flex
well, you threw away the only easy to use option
yes
i love using grid, but just impossible to center the last one
so annoying
they need to add something so its possible easily
yeah, because it's a grid
everything fits neatly in a box, or spans multiple
yeah but if you could just break the last grid or make the last grid different
you might be able to do something with sub-grids and setting the columns for the last element
hmm
i havent tried using sub grids before tbh
https://developer.mozilla.org/en-US/play
Do you see this code? Or does it get reset? It is definitly possible to achieve that result with just one grid.
MDN Web Docs
Playground | MDN
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
what you can try is to:
- wrap everything in an useless element
- make that useless element take the width of a column
- for the last element, make it start on the 2nd column and end on the 4th column
- maybe using sub-grid, you can find a way to make the element take the width of the grid
its empty
it gets reset
use jsfiddle or codepen to share code
Rough mostly done with gemini, but it's possible. (I am on phone atm) Just couldn't wrap my head around why you need it outside the grid.
yeah, that's an option too
which is 50% what i said, 50% different and easier
still harder than using flex
Mb if I sounded dumb before but you saying it has to be outside the grid just was confusing in my head
Flex is always gonna be easier, but for stuff like this grid is more appropriate since it was made for it.
@M1CK3Y
As a css user you should learn grid anyways soo
with a 4-column grid, it has.
with an 8-column grid, it doesn't
You can easily manipulate it to make it look the same tho.
i know, i didn't think about using 8 columns instead
Haven't used grid that much but ik it's possible to create those layouts using grid.
it's a good solution
wdym i should learn grid
lmao
you just need to keep in mind everything is 2 columns, but other than that, it's good
at least the ai generated an usable solution
was a general statement, idk if you already know it or not.
Euh if it's just 2 columns just use flex. Or are you talking about my example?
i use grid all the time
that's very bad
flex is useful too
both
also
Now I see in my head you using grid to make your entire site responsive lol
i cant use classes on each item
since i map over the items
you don't have to
You can use the pseudoselector stuff
Instead
Then somehow update the css with js if you wanna dynamically add more or something.
throwing js at a css problem is like throwing fire to a gasoline problem
i really dont understand why grid doesnt have a option like flex wrap
because it's a grid
you mean gasoline to a fire problem
no, i meant it that way around
bruh
you spill gasoline then use fire to burn it off, and all problems solved
(in fact, you now have a massive fire)
when i was little i threw a bucket of saw dust on a campfire
quite the experience
lol
especially when i didnt know what was gonna happen
https://codepen.io/Lode-Snaet/pen/YPyGyqg
It's without classes now.
big fire ball?
mushroom cloud
like 2 meter tall
Honestly you might be able to automatically style elements that get added using sass instead of js as well.
can i automate the psuedo classes with js?
Tbh I recommend sass for this to keep the js minimal.
ngl at this point it would lowkey just be easier to use flex
but i just dont like using flex for a grid layout
Uhu
if your js doesn't load, your css is broken
so, no, not a solution
use sass or ai or something to generate it all
jesus christ
lowkey might just have to use flex at this point
i aint doing all that
and that's just for 1 element
now imagine if you need to center 2 elements
and 3 elements
Using sass is fun tho
it really is
yes because i want them centered whenever they are less han 4 or the maximum amount
which is why i went straight to the flex solution: it just works
you have to adjust the width at some screen sizes, but it just works
https://jsfiddle.net/8aLsw0nm/ <-- here's an example
#<Sentry::ErrorEvent:0x00007fee73b32018> - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
i know it isn't grid and it's a bit funky, but it just works
i have done it before
you should do it again
this has a nice title! rolls off of the tongue 🤣
https://codepen.io/Lode-Snaet/pen/YPyGyqg
@M1CK3Y gemini got close to what you wanted, still some issues when it's an even number tho.
Did some proper vibe coding kek.
If it works like https://discord.com/channels/436251713830125568/1398357054736961546/1398383856867868773 then it's really not that responsive.
But I feel like this is overengineerd
it does, up to a certain screen size
then it changes the size
which is what the media queries do
check it on a desktop and resize the preview window
It's definitly the easiest solution.
I am a pro, I checked it on mobile and put the screensize to desktop format :plus1:
that works too
it's much easier than keeping using grid
im a huge grid fan, but, even i know when to use flex
Meanwhile I am a big flex fan, only recently I have used grid a couple times kek.
My figma files are auto layout within auto layout within layout (these are translated to flexboxes pretty much in development phase)
flex is usually pretty bad at grid things, and grid is pretty bad at flex things
Did you know there are people who devide there site blocks and entire websites into grids and make their website responsive that way? :6757_Sadge: 😭
i use whatever seems easier to me
If it looks like a grid, use grid
that is how i live by
From your post is think this is what youre trying to do but didnt read through all the comments
https://youtu.be/HvhSEsFEsAg?si=rUA0ozhBcxJTee9s
Kevin Powell
YouTube
Center the bottom row when using grid auto-fit
Grid’s auto-fit is amazing, but sometimes it would be nice if the bottom row could be centered instead of always starting on the left side. Well, after being inspired by Ryan Mulligan, I figured out a way to do it!
I’ll be honest, it’s not the simplest thing in the world, but there’s a lot to learn in getting it working, and once you u...
that's a solution, but the amount of container queries...
there's currently supported ios hardware that doesn't support container queries
~removed previous post~
if sibling-count() gets better support (only chromium for now), with some clever maths it would be possible
https://codepen.io/MarkBoots/pen/zxvKBJJ
(I could probably refactor the logic a bit to make it even more "clever")
sibling-count() is going to be amazing... but to me, even when we have them, I'd probably use flexbox...
it gives great physical pain to suggest flex, but ...
it's so much easier to read and understand, in this case
and it just works
it's like hammering a screw on a beam to attach a glass pane
but, for this, it works
Im probably gonna end up using flexbox in the end, but I need to check out that sibling-count() and play around with it, it seems like an amazing feature
it is awesome
shame that the support is still years away
does that work with grid-template-columns auto-fit?
probably with some additional logic i think so... but it'll need some work
not really grid-template-columns auto-fit, but it does auto adjust amount of cols based on grid-width
using animation-time-line, @property and sibling-count()/index() - lots of hacking and experimental features, do not use for production
https://codepen.io/MarkBoots/pen/myerxvJ
what about the previous one, should i not use that one for production either?
that's a question only you can answer
it obviously works in chrome, but, it won't work for others
you decide the support level you want to provide
if you only want to support the cutting bleeding edge, the tip of the spear brand-spanking new off of the production line, then this is fine
if you want better support, then flex will give you that
Maybe there is a polyfill or something?
a polyfill for css?
no
with javascript as a backup, maybe?
Idk anything about polyfills, but iirc there where for other features.
none that does what
sibling-count does
css is not very polyfill friendly
some things you can go around, like :empty
some things you can't, like making sibling-count() workBit late to this one as I have been on holiday.
Sorry if I have missed some detail or repeating what may have been said before but this can be achieved with grid quite easily assuming that the column count remains the same (ie 4) by actually defining 8 columns (ie double) and spanning each item across 2 columns. Then use
nth-child selectors to see which is the last element to define it's position (I opted to define it's end position in this sample code)
this works dynamically if you add more?
or would you have to add more nth-childs for that then?
As is it works dynamically if you add more items/cells.
What it won't do is work if you change the number of columns - you would need to adjust the numbers if you need to change the number of columns
but technically you could add these using js right? to make sure it also works for more columns etc?
As I say, in a 4 column grid the code as it is will work for any number of cells so you could add/remove these via JS.
If you change the number of columns you will need to adjust more values but it could easily be adapted.
I am not seeing any result in codepen
This was my demo
oh okay, it always put the last onces centered but its'always gonna be 4 columns
That is what you wanted, isn't it?
what the op wanted yes
not me kek
opps, sorry
I mean it's still handy to know
(I have added some simple JS to my demo to allow you to add/remove cells)
This could be easily adpted for a different number of columns.
make a input field or something in the demo so you can adapt it easily xd.