Next.js Discord

Discord Forum

Grid centering

Unanswered
Bigeye scad posted this in #help-forum
Open in Discord
Bigeye scadOP
i have a grid where i coded as 4 items in a row
if i have 7 items, i have 4 in 1st row and 3 in 2nd row
is it possible to center those 3 in width of 4 rows?

3 Replies

Asian black bear
Yes, if you use a grid with 8 columns, a col-span of 2 for all items and then force the first item in the last row to have a col-start of 2.
  <div class="grid grid-cols-8 gap-4 p-2">
    <div class="col-span-2 size-8 bg-white"></div>
    <div class="col-span-2 size-8 bg-white"></div>
    <div class="col-span-2 size-8 bg-white"></div>
    <div class="col-span-2 size-8 bg-white"></div>

    <div class="col-start-2 col-span-2 size-8 bg-white"></div>
    <div class="col-span-2 size-8 bg-white"></div>
    <div class="col-span-2 size-8 bg-white"></div>
  </div>