CODEWITHSUNDEEP
csscss-gridtailwind-css
erkage
erkage

Reputation: 167

How to create an equal width columns grid with gap in Tailwind?

First time i'm using css grid and i have problems with getting an equal content of my 3 columns when adding gap between them. I'm not sure it's a tailwind problem (with the predefined classes) or with the grip or where the solution can come from (what i'm missing).

Here is an illustrative example:

https://codepen.io/erkage/pen/VwmxeRG

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css">
<div class="grid grid-cols-3 space-x-3 items-stretch mt-10 m-auto border border-gray-900" style="width:800px">
  <div class="bg-blue-200 py-2">
    <label class="block">Label 1</label>
    <input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="266px">
  </div>
  <div class="bg-blue-200 py-2">
    <label class="block">Label 2</label>
    <input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="254px">
  </div>
  <div class="bg-blue-200 py-2">
    <label class="block">Label 3</label>
    <input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="254px">
  </div>
</div>

The HTML:

<div class="parent">
  <div class="child">this is larger than 2-3</div>
  <div class="child2">this is equal with 3rd</div>
  <div class="child2">this is equal with 2nd</div>
</div>

The used css are (which comes from tailwind):

.parent {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.child2 {
  margin-right: calc(0.75rem * 0);
  margin-left: calc(0.75rem * calc(1 - 0));
}

And i know that the main problem comes from that child 2 and 3 has a margin and 1 not but looking for a builtin solution (with css grid) if it exist. Also child 1 can't have margin-left because of design circumstences.

Upvotes: 4

Views: 12440

Answers (1)

Temani Afif
Temani Afif

Reputation: 272901

replace space-x-3 by gap-x-3

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css">

<div class="grid grid-cols-3 gap-x-3 items-stretch mt-10 m-auto border border-gray-900" style="width:800px">
  <div class="bg-blue-200 py-2">
    <label class="block">Label 1</label>
    <input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="266px">
  </div>
  <div class="bg-blue-200 py-2">
    <label class="block">Label 2</label>
    <input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="254px">
  </div>
  <div class="bg-blue-200 py-2">
    <label class="block">Label 3</label>
    <input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="254px">
  </div>
</div>

Upvotes: 8

Related Questions