New This website is new, your feedback will help us to improve it.

Grid system examples

Example Stacked to horizontal

Creates a basic grid system that starts out stacked on small devices before becoming horizontal on wider (medium) devices.

<div class="grid grid-cols-12 gap-4">
  <!-- Row 1 -->
  <div class="col-span-12 grid grid-cols-12 gap-4">
      <div class="bg-green-500 h-20 col-span-12 md:col-span-1"></div>
      <div class="bg-yellow-500 h-20 col-span-12 md:col-span-1"></div>
      <div class="bg-purple-500 h-20 col-span-12 md:col-span-1"></div>
      <div class="bg-pink-500 h-20 col-span-12 md:col-span-1"></div>
      <div class="bg-blue-500 h-20 col-span-12 md:col-span-1"></div>
      <div class="bg-purple-500 h-20 col-span-12 md:col-span-1"></div>
      <div class="bg-green-500 h-20 col-span-12 md:col-span-1"></div>
      <div class="bg-red-500 h-20 col-span-12 md:col-span-1"></div>
      <div class="bg-yellow-500 h-20 col-span-12 md:col-span-1"></div>
      <div class="bg-blue-500 h-20 col-span-12 md:col-span-1"></div>
      <div class="bg-orange-700 h-20 col-span-12 md:col-span-1"></div>
      <div class="bg-blue-500 h-20 col-span-12 md:col-span-1"></div>
  </div>
  <!-- Row 2 -->
  <div class="col-span-12 grid grid-cols-12 gap-4">
      <div class="bg-blue-500 h-20 col-span-12 md:col-span-8"></div>
      <div class="bg-green-500 h-20 col-span-12 md:col-span-4"></div>
  </div>
  <!-- Row 3 -->
  <div class="col-span-12 grid grid-cols-12 gap-4">
      <div class="bg-pink-500 h-20 col-span-12 md:col-span-4"></div>
      <div class="bg-yellow-500 h-20 col-span-12 md:col-span-4"></div>
      <div class="bg-purple-500 h-20 col-span-12 md:col-span-4"></div>
  </div>
  <!-- Row 4 -->
  <div class="col-span-12 grid grid-cols-12 gap-4">
      <div class="bg-purple-500 h-20 col-span-12 md:col-span-6"></div>
      <div class="bg-pink-500 h-20 col-span-12 md:col-span-6"></div>
  </div>
</div>

Example Grid sizes

Using the various grid size classes its possible layout a grid of items such that the number of items in each row increases with each grid size. For example, at the smallest grid size 2 items may be shown per row, then 4, then 6, etc.

Usually it's best to let content at very small sizes stack naturally, however you can target the extra small grid size where you always want items to be side by side.

<div class="grid grid-cols-12 gap-4">
<!-- Columns are always 50% wide -->
    <div class="bg-purple-500 h-20 col-span-6"></div>
    <div class="bg-pink-500 h-20 col-span-6"></div>
<!-- Responsive columns -->
    <div class="bg-green-500 h-20 col-span-6 md:col-span-4 lg:col-span-2"></div>
    <div class="bg-yellow-500 h-20 col-span-6 md:col-span-4 lg:col-span-2"></div>
    <div class="bg-purple-500 h-20 col-span-6 md:col-span-4 lg:col-span-2"></div>
    <div class="bg-pink-500 h-20 col-span-6 md:col-span-4 lg:col-span-2"></div>
    <div class="bg-blue-500 h-20 col-span-6 md:col-span-4 lg:col-span-2"></div>
    <div class="bg-purple-500 h-20 col-span-6 md:col-span-4 lg:col-span-2"></div>
    <div class="bg-green-500 h-20 col-span-6 md:col-span-4 lg:col-span-2"></div>
    <div class="bg-red-500 h-20 col-span-6 md:col-span-4 lg:col-span-2"></div>
    <div class="bg-yellow-500 h-20 col-span-6 md:col-span-4 lg:col-span-2"></div>
    <div class="bg-blue-500 h-20 col-span-6 md:col-span-4 lg:col-span-2"></div>
    <div class="bg-orange-700 h-20 col-span-6 md:col-span-4 lg:col-span-2"></div>
    <div class="bg-blue-500 h-20 col-span-6 md:col-span-4 lg:col-span-2"></div>
</div>

Example Column wrapping

If more than the total number of columns for each grid are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. This example is responsive, the rectangles switch to a stacked layout below md screen sizes.

md:col-span-9
md:col-span-4
Since 9 + 4 = 13, this wraps to a new row
md:col-span-6
Subsequent columns continue along the new line. 
<div class="grid grid-cols-12 gap-4 text-white">
  <div class="col-span-12 md:col-span-9 flex items-center justify-center bg-blue-500 h-20">md:col-span-9</div>
  <div class="col-span-12 md:col-span-4 flex items-center justify-center bg-green-500 h-20">
      md:col-span-4<br>
      Since 9 + 4 = 13, this wraps to a new row
  </div>
  <div class="col-span-12 md:col-span-6 flex items-center justify-center bg-purple-500 h-20">
      md:col-span-6<br>
      Subsequent columns continue along the new line.
  </div>
</div>

Example Responsive column resets

Tailwind uses grid (not floats), this is solved with responsive columns. This automatically prevents awkward wrapping. No clearfix is needed.

<div class="grid grid-cols-12 gap-4">
  <div class="col-span-12 md:col-span-6 grid grid-cols-6 gap-4">
      <div class="col-span-3 bg-blue-500 h-20"></div>
      <div class="col-span-3 bg-green-500 h-20"></div>
  </div>
  <div class="col-span-12 md:col-span-6"></div>
  <div class="col-span-12 md:col-span-6 grid grid-cols-6 gap-4">
      <div class="col-span-3 bg-purple-500 h-20"></div>
      <div class="col-span-3 bg-pink-500 h-20"></div>
  </div>
  <div class="col-span-12 md:col-span-6"></div>
</div>