Grids

Examples of building grid layouts with Tailwind CSS.

Tailwind doesn't include purpose-built grid classes out of the box, but grid layouts are simple to build using the existing Flexbox and width utilities.

Here are a few examples to help you get an idea of how to build grids using Tailwind.

Basic Grids

Use the existing Flexbox and percentage width utilities to construct basic grids.

<!-- Full width column -->
<div class="flex mb-4">
  <div class="w-full bg-gray-500 h-12"></div>
</div>

<!-- Two columns -->
<div class="flex mb-4">
  <div class="w-1/2 bg-gray-400 h-12"></div>
  <div class="w-1/2 bg-gray-500 h-12"></div>
</div>

<!-- Three columns -->
<div class="flex mb-4">
  <div class="w-1/3 bg-gray-400 h-12"></div>
  <div class="w-1/3 bg-gray-500 h-12"></div>
  <div class="w-1/3 bg-gray-400 h-12"></div>
</div>

<!-- Four columns -->
<div class="flex mb-4">
  <div class="w-1/4 bg-gray-500 h-12"></div>
  <div class="w-1/4 bg-gray-400 h-12"></div>
  <div class="w-1/4 bg-gray-500 h-12"></div>
  <div class="w-1/4 bg-gray-400 h-12"></div>
</div>

<!-- Five columns -->
<div class="flex mb-4">
  <div class="w-1/5 bg-gray-500 h-12"></div>
  <div class="w-1/5 bg-gray-400 h-12"></div>
  <div class="w-1/5 bg-gray-500 h-12"></div>
  <div class="w-1/5 bg-gray-400 h-12"></div>
  <div class="w-1/5 bg-gray-500 h-12"></div>
</div>

<!-- Six columns -->
<div class="flex">
  <div class="w-1/6 bg-gray-400 h-12"></div>
  <div class="w-1/6 bg-gray-500 h-12"></div>
  <div class="w-1/6 bg-gray-400 h-12"></div>
  <div class="w-1/6 bg-gray-500 h-12"></div>
  <div class="w-1/6 bg-gray-400 h-12"></div>
  <div class="w-1/6 bg-gray-500 h-12"></div>
</div>

Responsive Grids

Use the responsive variants of the width utilities to build responsive grid layouts.

Mixed Column Sizes

Mix different percentage width utilities to build mixed size grids.

<!-- Narrower side column -->
<div class="flex mb-4">
  <div class="w-3/4 bg-gray-500 h-12"></div>
  <div class="w-1/4 bg-gray-400 h-12"></div>
</div>

<!-- Wide center column -->
<div class="flex">
  <div class="w-1/5 bg-gray-500 h-12"></div>
  <div class="w-3/5 bg-gray-400 h-12"></div>
  <div class="w-1/5 bg-gray-500 h-12"></div>
</div>

Wrapping Columns

Add flex-wrap to your column container to allow columns to wrap when they run out of room.

<div class="flex flex-wrap -mb-4">
  <div class="w-1/3 mb-4 bg-gray-400 h-12"></div>
  <div class="w-1/3 mb-4 bg-gray-500 h-12"></div>
  <div class="w-1/3 mb-4 bg-gray-400 h-12"></div>
  <div class="w-1/3 mb-4 bg-gray-500 h-12"></div>
  <div class="w-1/3 mb-4 bg-gray-400 h-12"></div>
</div>

Column Spacing

Add a negative horizontal margin like -mx-2 to your column container and an equal horizontal padding like px-2 to each column to add gutters.

To prevent horizontal scrolling in full width layouts, add overflow-hidden to another parent container, or compensate for the negative margin with matching horizontal padding.

<div class="px-2">
  <div class="flex -mx-2">
    <div class="w-1/3 px-2">
      <div class="bg-gray-400 h-12"></div>
    </div>
    <div class="w-1/3 px-2">
      <div class="bg-gray-500 h-12"></div>
    </div>
    <div class="w-1/3 px-2">
      <div class="bg-gray-400 h-12"></div>
    </div>
  </div>
</div>

Automatic Column Widths

Use flex-1 instead of an explicit width on your columns to have them size automatically to fill the row.

<!-- Full width column -->
<div class="flex mb-4">
  <div class="flex-1 bg-gray-500 h-12"></div>
</div>

<!-- Five columns -->
<div class="flex mb-4">
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
</div>

<!-- Seven columns -->
<div class="flex mb-4">
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
</div>

<!-- Eleven columns -->
<div class="flex mb-4">
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
  <div class="flex-1 bg-gray-500 h-12"></div>
  <div class="flex-1 bg-gray-400 h-12"></div>
</div>

Column Order

Use flex-row-reverse to reverse column order. Useful for two-column responsive layouts where the column on right should appear first on smaller screens.

1
2
<div class="flex md:flex-row-reverse flex-wrap">
  <div class="w-full md:w-3/4 bg-gray-500 p-4 text-center text-gray-200">1</div>
  <div class="w-full md:w-1/4 bg-gray-400 p-4 text-center text-gray-700">2</div>
</div>

Simple Offsets

Use auto margin utilities like ml-auto and mr-auto to offset columns in a row.

<div class="flex flex-wrap">
  <div class="w-1/3 ml-auto bg-gray-500 h-12"></div>
  <div class="w-1/3 mr-auto bg-gray-400 h-12"></div>
</div>