Center partial rows in a CSS grid #14442
Unanswered
emarthinsen
asked this question in
Help
Replies: 1 comment
-
You can use <div class="grid grid-cols-6 gap-8">
<div class="col-span-full grid grid-cols-subgrid">
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
<span>x</span>
</div>
<div class="col-span-full col-start-2 grid grid-cols-subgrid">
<span>y</span>
<span>y</span>
<span>y</span>
<span>y</span>
</div>
</div> And with a touch of js you can automatically center by applying a dynamic class like `${length < 3 ? "col-start-3" : length < 6 ? "col-start-2" : "col-start-1"}` |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I have a grid that is defined like this:
It's a basic, 6-column grid with a 2rem gap. It works great.
I have a new requirement now. For any rows in the grid that have fewer than 6 items in there (this can happen if there are fewer than 6 items in the entire grid, or if the number of items in the grid isn't evenly divisible by 6, so the last row has the remainders) the items should be centered. Visually, this might look something like this:
Does anyone know how best to do this?
Thanks in advance.
Beta Was this translation helpful? Give feedback.
All reactions