1. Layout
  2. Columns

Layout

Tailwind CSS Columns

Utilities for controlling the number of columns within an element.

Class
Properties
columns-1 columns: 1;
columns-2 columns: 2;
columns-3 columns: 3;
columns-4 columns: 4;
columns-5 columns: 5;
columns-6 columns: 6;
columns-7 columns: 7;
columns-8 columns: 8;
columns-9 columns: 9;
columns-10 columns: 10;
columns-11 columns: 11;
columns-12 columns: 12;
columns-auto columns: auto;
columns-3xs columns: 16rem; /* 256px */
columns-2xs columns: 18rem; /* 288px */
columns-xs columns: 20rem; /* 320px */
columns-sm columns: 24rem; /* 384px */
columns-md columns: 28rem; /* 448px */
columns-lg columns: 32rem; /* 512px */
columns-xl columns: 36rem; /* 576px */
columns-2xl columns: 42rem; /* 672px */
columns-3xl columns: 48rem; /* 768px */
columns-4xl columns: 56rem; /* 896px */
columns-5xl columns: 64rem; /* 1024px */
columns-6xl columns: 72rem; /* 1152px */
columns-7xl columns: 80rem; /* 1280px */

Basic usage

Adding based on column count

Use the columns-{count} utilities to set the number of columns that should be created for the content within an element. The column width will be automatically adjusted to accommodate that number.

Image Description
Image Description
Image Description 
                
                  <div class="columns-3 ...">
                    <img class="w-full aspect-video ..." src="..." />
                    <img class="w-full aspect-square ..." src="..." />
                    <!-- ... -->
                  </div>

Adding based on column width

Use the columns-{width} utilities to set the ideal column width for the content within an element, with the number of columns (the count) automatically adjusting to accommodate that value.

This "t-shirt" scale is the same as the max-width scale, with the addition of 2xs and 3xs, since smaller columns may be desirable.

Resize the example to see it in action. 

                
                  <div class="columns-3xs ...">
                    <img class="w-full aspect-video ..." src="..." />
                    <img class="w-full aspect-square ..." src="..." />
                    <!-- ... -->
                  </div>

Setting the column gap

To specify the width between columns, you can use the gap-x utilities:

Image Description
Image Description
Image Description 
                
                  <div class="gap-8 columns-3 ...">
                    <img class="w-full aspect-video ..." src="..." />
                    <img class="w-full aspect-square ..." src="..." />
                    <!-- ... -->
                  </div>