Tailwind CSS - Grid Auto Columns

Tailwind CSS: Grid Auto Columns

The Grid Auto Columns utilities control the size of grid columns that are created implicitly. An implicit column is one you haven’t explicitly defined in your grid layout, which often happens when you add more items to a grid than you have defined columns for.

When Would You Use This?

Imagine you are using grid-flow-col. This tells your grid to arrange items in columns, creating new columns as needed. But how wide should these automatically generated columns be? grid-auto-columns gives you the answer. It sets a default width for any column that isn’t explicitly sized.

Grid Auto Columns Classes

Tailwind provides four main utilities to control the size of these implicit columns:

Class	CSS Property	Description
auto-cols-auto	grid-auto-columns: auto;	The column size is based on the size of its content. It will stretch to fit.
auto-cols-min	grid-auto-columns: min-content;	The column shrinks to the smallest possible size of its content (e.g., the length of the longest word).
auto-cols-max	grid-auto-columns: max-content;	The column expands to the full intrinsic size of its content without wrapping.
auto-cols-fr	grid-auto-columns: minmax(0, 1fr);	The column takes up a fraction of the available free space in the grid container.

Practical Examples

In the following examples, we use grid grid-flow-col to create a column-based layout. The number of columns is determined by the number of child div elements. The auto-cols-* utility defines how wide each of these columns will be.

Example: auto-cols-auto

With auto-cols-auto, each column’s width is determined by the content inside it. A column with more content will be wider.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>auto-cols-auto</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
  <h2 class="text-xl font-bold mb-4">auto-cols-auto</h2>
  <div class="grid grid-flow-col auto-cols-auto gap-4 p-4 bg-gray-200 rounded-lg">
    <div class="bg-teal-300 p-4 rounded">Item 1</div>
    <div class="bg-teal-400 p-4 rounded">Item 2 with more content</div>
    <div class="bg-teal-500 p-4 rounded">Item 3</div>
  </div>
</body>
</html>

Example: auto-cols-min

auto-cols-min forces columns to be as narrow as possible. Notice how the second item’s text wraps extensively to minimize the column width.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>auto-cols-min</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
  <h2 class="text-xl font-bold mb-4">auto-cols-min</h2>
  <div class="grid grid-flow-col auto-cols-min gap-4 p-4 bg-gray-200 rounded-lg">
    <div class="bg-sky-300 p-4 rounded">Item 1</div>
    <div class="bg-sky-400 p-4 rounded">Item 2 with more content</div>
    <div class="bg-sky-500 p-4 rounded">Item 3</div>
  </div>
</body>
</html>

Example: auto-cols-max

auto-cols-max is the opposite of auto-cols-min. It makes columns as wide as they need to be to fit their content on a single line, preventing text wrapping.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>auto-cols-max</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
  <h2 class="text-xl font-bold mb-4">auto-cols-max</h2>
  <div class="grid grid-flow-col auto-cols-max gap-4 p-4 bg-gray-200 rounded-lg">
    <div class="bg-indigo-300 p-4 rounded">Item 1</div>
    <div class="bg-indigo-400 p-4 rounded">Item 2 with more content</div>
    <div class="bg-indigo-500 p-4 rounded">Item 3</div>
  </div>
</body>
</html>

Example: auto-cols-fr

auto-cols-fr divides the available container space equally among all implicit columns. This is great for creating flexible, evenly spaced layouts.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>auto-cols-fr</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
  <h2 class="text-xl font-bold mb-4">auto-cols-fr</h2>
  <div class="grid grid-flow-col auto-cols-fr gap-4 p-4 bg-gray-200 rounded-lg">
    <div class="bg-purple-300 p-4 rounded">Item 1</div>
    <div class="bg-purple-400 p-4 rounded">Item 2 with more content</div>
    <div class="bg-purple-500 p-4 rounded">Item 3</div>
  </div>
</body>
</html>