Flexbox Grids

Examples of building Flexbox grid layouts with Tailwind CSS.

Tailwind v1.2+ includes utilities for CSS Grid out of the box, but if you need to support older browsers, you can also build grid layouts using Tailwind's Flexbox and width utilities.

Here are a few examples to help you get an idea of how to build Flexbox 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.

<div class="flex flex-wrap">
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-500"></div>
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-400"></div>
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-500"></div>
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-400"></div>
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 mb-4 bg-gray-500"></div>
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 mb-4 bg-gray-400"></div>
</div>

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.

<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>

← Forms Navigation →