CODEWITHSUNDEEP
htmlcsscss-gridtailwind-css
jac
jac

Reputation: 61

Correct way to do Tailwind grids?

I am just getting started using Tailwind and I am a bit confused on how to use grids/rows and columns correctly. Here are the different methods I see being used...

Method 1:

<div class="flex flex-wrap -mx-1">
  <div class="my-1 px-1 w-1/2">
    <!-- Column Content -->
  </div>
  <div class="my-1 px-1 w-1/2">
    <!-- Column Content -->
  </div>
</div>

Method 2:

<div class="grid grid-cols-2 gap-1">
  <div>
    <!-- Column Content -->
  </div>
  <div>
    <!-- Column Content -->
  </div>
</div>

Method 3:

<div class="grid grid-flow-col gap-1">
  <div class="col-span-1">
    <!-- Column Content -->
  </div>
  <div class="col-span-1">
    <!-- Column Content -->
  </div>
</div>

Can someone explain to me the difference between these 3 methods and which one is the correct one to use for what application?

Upvotes: 4

Views: 4383

Answers (1)

Ghost
Ghost

Reputation: 5059

Let's discuss each example. As mentioned in the comments, there's no way to create a "perfect" grid, nor there's a way to create the "best" grid. Everything depends on what you're going to create.

The first example you mentioned is built using Flexbox.

The second and the third examples are built using Grid.

The first example:

The flex class will cause the div element to be a flex container.

flex-wrap will control how flex items wrap.

-mx-1 is a margin property which will control the element's margin, where it's exactly equal:

margin-left: -0.25rem;
margin-right: -0.25rem;

In the second div, the my-1 is a margin property, too, where it's exactly equal:

margin-top: 0.25rem;
margin-bottom: 0.25rem;

px-1 is a padding property, which will control the element's padding, where it's exactly equal:

padding-left: 0.25rem;
padding-right: 0.25rem;

w-1/2 is a width property, which will set the element's width, where it's exactly equal:

width: 50%;

The second example:

The grid class will cause the div element to be a grid layout.

grid-cols-2 will specify the columns in the grid layout, where it's exactly equal:

grid-template-columns: repeat(2, minmax(0, 1fr));

gap-1 will control gutters between grid and flexbox items, where it's exactly equal:

gap: 0.25rem;

The third example:

The third example is somewhat similar to the second one, but I'll explain the other classes that aren't mentioned above.

grid-flow-col is a Grid Auto Flow property, which will control how elements in a grid are auto-placed.

col-span-1 will control how elements are sized and placed across grid columns, where it's exactly equal:

grid-column: span 1 / span 1;

Upvotes: 3

Related Questions