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

Html – Flexbox or CSS – n number of items per row without stretching the item. Using tailwind or CSS

Is there any way to force a certain number of items per row using flex box or any other way in CSS / tailwind, without stretching the item’s width?

For my case, lets assume 4 items per row:-

<script src="https://cdn.tailwindcss.com/3.4.3"></script>
<h1 class="mt-6">my failed attempt:-</h1>
<div class="flex flex-wrap bg-gray-300">
  <div class="m-2 grow basis-1/5 bg-yellow-500 p-10"></div>
  <div class="m-2 grow basis-1/5 bg-blue-500 p-10"></div>
  <div class="m-2 grow basis-1/5 bg-orange-500 p-10"></div>
  <div class="m-2 grow basis-1/5 bg-red-500 p-10"></div>
  <div class="m-2 grow basis-1/5 bg-neutral-500 p-10"></div>
  <div class="m-2 grow basis-1/5 bg-green-500 p-10"></div>
  <!-- ... more unknown number of elements with unknown width -->
</div>

<h1 class="mt-6">what i want:-</h1>
<div class="flex">
  <div class="m-2 bg-yellow-500 p-10"></div>
  <div class="m-2 bg-blue-500 p-10"></div>
  <div class="m-2 bg-orange-500 p-10"></div>
  <div class="m-2 bg-red-500 p-10"></div>
</div>
<div class="flex">
  <div class="m-2 bg-teal-500 p-10"></div>
  <div class="m-2 bg-cyan-500 p-10"></div>
  <div class="m-2 bg-stone-500 p-10"></div>
  <div class="m-2 bg-pink-500 p-10"></div>
</div>
<div class="flex">
  <div class="m-2 bg-green-500 p-10"></div>
  <div class="m-2 bg-black p-10"></div>
  <div class="m-2 bg-slate-500 p-10"></div>
</div>
Tags:

2

Answers


  1. 0

    Try grid, grid-cols-*, gap-*

    Tailwind CSS documentation for reference

    <script src="https://cdn.tailwindcss.com/3.4.3"></script>
<div class="grid grid-cols-4 gap-4">
  <div class="w-28 h-28 bg-yellow-500"></div>
  <div class="w-32 h-32 bg-blue-500"></div>
  <div class="w-36 h-36 bg-orange-500"></div>
  <div class="w-40 h-40 bg-red-500"></div>
  <div class="w-4 h-4 bg-neutral-500"></div>
  <div class="w-12 h-12 bg-green-500"></div>
  <!-- ... more unknown number of elements with unknown width -->
</div>
    Login or Signup to reply.
  2. 0 
    <script src="https://cdn.tailwindcss.com/3.4.3"></script>
<h1 class="mt-6">my failed attempt:-</h1>
<div class="grid grid-cols-4 bg-gray-300">
  <div class="m-2 grow basis-1/5 bg-yellow-500 p-10"></div>
  <div class="m-2 grow basis-1/5 bg-blue-500 p-10"></div>
  <div class="m-2 grow basis-1/5 bg-orange-500 p-10"></div>
  <div class="m-2 grow basis-1/5 bg-red-500 p-10"></div>
  <div class="m-2 grow basis-1/5 bg-neutral-500 p-10"></div>
  <div class="m-2 grow basis-1/5 bg-green-500 p-10"></div>
  <!-- ... more unknown number of elements with unknown width -->
</div>

<h1 class="mt-6">what i want:-</h1>
<div class="flex">
  <div class="m-2 bg-yellow-500 p-10"></div>
  <div class="m-2 bg-blue-500 p-10"></div>
  <div class="m-2 bg-orange-500 p-10"></div>
  <div class="m-2 bg-red-500 p-10"></div>
</div>
<div class="flex">
  <div class="m-2 bg-teal-500 p-10"></div>
  <div class="m-2 bg-cyan-500 p-10"></div>
  <div class="m-2 bg-stone-500 p-10"></div>
  <div class="m-2 bg-pink-500 p-10"></div>
</div>
<div class="flex">
  <div class="m-2 bg-green-500 p-10"></div>
  <div class="m-2 bg-black p-10"></div>
  <div class="m-2 bg-slate-500 p-10"></div>
</div>

    Use this grid-cols-* with Tailwind CSS and replace * with "n" number of columns you want and add grid before this. If you want gap between these columns then you can use gap-*.

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

Back To Top
Search