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 🙂
<div class="grid-container">
<div class="grid-item1"></div>
<div class="grid-item2"></div>
</div>
<div class="grid-container">
<div class="grid-item1"></div>
<div class="grid-item2"></div>
</div>
.grid-container {
display: grid;
grid-template-columns: repeat(8, 1fr);

.grid-item {
&1 {
grid-column: span 4;
}
&2 {
grid-column: span 8;
}
}
}
.grid-container {
display: grid;
grid-template-columns: repeat(8, 1fr);

.grid-item {
&1 {
grid-column: span 4;
}
&2 {
grid-column: span 8;
}
}
}
13 Replies
Mannix
Mannix•16mo ago
maybe span it just like the other one and use juftify-self: center; to center it ?
Alex
Alex•16mo ago
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
Mannix
Mannix•16mo ago
you mean the width of the grid-container right ?? also you have an error in your scss it's grid-column not grid-columns 🙂
Alex
Alex•16mo ago
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 columns
Mannix
Mannix•16mo ago
Alex
Alex•16mo ago
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%
Mannix
Mannix•16mo ago
you can put max-width on it to make it work
Alex
Alex•16mo ago
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!
Mannix
Mannix•16mo ago
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
Alex
Alex•16mo ago
How would i make it so the max-width has the value of span 4 - is that where subgrid comes into play?
Mannix
Mannix•16mo ago
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 pen
Alex
Alex•16mo ago
I see -thanks!
Mannix
Mannix•16mo ago
np thumbup
Want results from more Discord servers?
Add your server