Question 161625 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can Reactjs centerize the rest of the grid items?

Example

I was try to make like the example one for tablet layout, here’s my code :

<div class="grid grid-cols-2 gap-8 justify-items-center px-8 mt-8 md:grid-cols-3 lg:grid-cols-4">
 <div class="w-28 aspect-video bg-green-500"></div>
 <div class="w-28 aspect-video bg-green-500"></div>
 <div class="w-28 aspect-video bg-green-500"></div>
 <div class="w-28 aspect-video bg-green-500"></div>
 <div class="w-28 aspect-video bg-green-500"></div>
 <div class="w-28 aspect-video bg-green-500"></div>
 <div class="w-28 aspect-video bg-green-500"></div>
 <div class="w-28 aspect-video bg-green-500"></div>
</div>

So, there’s any alternative for that?

Tags:

2

Answers


  1. 0

    You could consider doubling the grid column track count, and then offseting the items by one column:

    <script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-4 gap-8 justify-items-center px-8 mt-8 md:grid-cols-6 lg:grid-cols-8">
  <div class="w-28 aspect-video bg-green-500 col-span-2"></div>
  <div class="w-28 aspect-video bg-green-500 col-span-2"></div>
  <div class="w-28 aspect-video bg-green-500 col-span-2"></div>
  <div class="w-28 aspect-video bg-green-500 col-span-2"></div>
  <div class="w-28 aspect-video bg-green-500 col-span-2"></div>
  <div class="w-28 aspect-video bg-green-500 col-span-2"></div>
  <div class="w-28 aspect-video bg-green-500 col-span-2 md:max-lg:col-start-2"></div>
  <div class="w-28 aspect-video bg-green-500 col-span-2 md:max-lg:col-start-4"></div>
</div>
    Login or Signup to reply.
  2. 0

    I think you should use flex for that instead of grid and setting the max-with to the padding + gap + columns width, like:

    <div class="flex gap-8 p-8 mx-auto flex-wrap justify-center max-w-[20] md:max-w-[29rem] lg:max-w-[38rem]">
  <div class="w-28 aspect-video bg-green-500"></div>
  <div class="w-28 aspect-video bg-green-500"></div>
  <div class="w-28 aspect-video bg-green-500"></div>
  <div class="w-28 aspect-video bg-green-500"></div>
  <div class="w-28 aspect-video bg-green-500"></div>
  <div class="w-28 aspect-video bg-green-500"></div>
  <div class="w-28 aspect-video bg-green-500"></div>
  <div class="w-28 aspect-video bg-green-500"></div>
</div>

    https://play.tailwindcss.com/4Sexse1HX4

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search