css Question posted in
Some basic documentation can be found here.

Css – How do I center/stretch a grid layout if there are fewer items than columns?

I want a responsive grid layout where the number of columns changes dynamically based on screen size. If there are fewer items than columns, they should use the available space or at least be centered and not aligned on the left side.

Basically: "If you have many items, then you are allowed to put a maximum of x items in a row on screen size y. If you have less items than you are allowed to display in a row, then use the available space in the row."

Any idea how to solve that with css?

I am using tailwind in a nextjs project and this are my classes so far:

px-2.5 grid grid-cols-1 mobile:grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-4 desktop:grid-cols-5 gap-y-12 gap-x-1 w-full font-lrg font-medium flex-1 bg-white
Tags:

2

Answers


  1. 0 
    <div class="px-2.5 grid grid-cols-1 mobile:grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-4 desktop:grid-cols-5 gap-y-12 gap-x-1 w-full max-w-screen-lg mx-auto font-lrg font-medium flex-1 bg-white justify-center">
  <div class="col-span-1 flex justify-center items-center">
  </div>
</div>

    Try this. I used flex and mx-auto to center a grid and have it fill out properly even if there are fewer items than columns. You can also try justify-center

    Login or Signup to reply.
  2. 0

    I’m afraid using a fixed predefined number of columns won’t achieve this effect. The closest method I can think of is using a responsive grid.

    Specifically, by using auto-fit, the grid will occupy all the space even when there are not enough child elements. Then, by limiting the maximum width of elements in the repeat function, you can achieve a responsive layout for the child elements:

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

<ul class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-x-1 gap-y-12">
  <li class="h-32 bg-amber-200"></li>
  <li class="h-32 bg-amber-200"></li>
  <li class="h-32 bg-amber-200"></li>
  <li class="h-32 bg-amber-200"></li>
</ul>

    (đŸ‘†Change the viewport width to see the effect.)

    Demo on Tailwind Play

    You need to adjust the allowed width of the child elements (here it is 200px) based on your actual requirements to achieve the best visual effect. You can also use multiple column definitions with different widths depending on the viewport width to achieve better control:

    <ul class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] lg:grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-x-1 gap-y-12">
  <!-- ... -->
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search