How to center a grid-item horizontally within grid-container when item doesn't span the full width
I a have grid-container with 8 even columns.
I then have 2 grid-items. the first having a span of 4 columns, the second 8 columns.
That forces 2 rows which is what i expect and want.
The first one is aligned on the left (spanning half, this is the one i want centered)
The second one does of course span the full width, therefore no need for centering.
I'm aware i could achieve this by specifying the column-start and -end on the first item, but i'm curios if this can be achieved only specifying a span.
I have tried all possible (i think) justify and align, items and content, both on parent and on child (using -self) - none seems to work
Thanks in advance, i hope my question makes sense 🙂
13 Replies
maybe span it just like the other one and use juftify-self: center; to center it ?
The content inside the grid-item has the width of the grid-item, so the grid-item/content would just span the whole width - but thanks anyways
you mean the width of the grid-container right ?? also you have an error in your scss it's grid-column not grid-columns 🙂
Sorry if i was unclear - i meant the content i have inside the grid-item itself has
width: auto, so by increasing the span of the grid-item, the content inside would just appear wider, instead of centered - does that make sense? Thanks for pointing out the css 🙂
If it makes my question more clear: I bassicly just want all grid-items centered horizontally within the grid-container, if the item's dont span all columnsare you sure ? https://codepen.io/MannixMD/pen/xxQQNWx
No, now im actually not - just didn't work before, let me test again
I forgot to mention the content of the grid-item is an img, so that prob why it doesn't work, since it just has width: 100%
you can put max-width on it to make it work
Yeah, but i do want the img to have the full width of the grid-item - it's part of a responsive layout. Think i'll just have to use media queries and specify a start column - but thanks for all ur help!
if you gonna limit the number of columns the row can span it would be the same as putting max-width on the img
result is gonna be the same
How would i make it so the max-width has the value of span 4 - is that where subgrid comes into play?
hmm you would need to use calc but then justify stops working so you would need
margin-inline: auto + display: block; on img to put in the center check the penI see -thanks!
np 