Grid Auto Columns

Sets the size of implicitly created columns in a CSS Grid. While grid-template-columns defines explicit columns, grid-auto-columns controls the sizing of automatically generated columns that aren't explicitly defined. This is particularly useful for grids where the number of columns may vary or when using grid-auto-flow: column to create columns dynamically.

Flexbox & Grid1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="grid grid-flow-col auto-cols-auto gap-4 p-4 bg-gray-100 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">Auto-sized column</div>
  <div class="bg-blue-200 p-4 rounded">Content determines width</div>
  <div class="bg-blue-300 p-4 rounded">Another auto-sized column</div>
</div>

Examples

Auto columns sized based on their content

<div class="grid grid-flow-col auto-cols-auto gap-4 p-4 bg-gray-100 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">Auto-sized column</div>
  <div class="bg-blue-200 p-4 rounded">Content determines width</div>
  <div class="bg-blue-300 p-4 rounded">Another auto-sized column</div>
</div>

Edit in playground

Auto columns that each take an equal fraction of available space

<div class="grid grid-flow-col auto-cols-fr gap-4 p-4 bg-gray-100 rounded-lg">
  <div class="bg-green-100 p-4 rounded">1fr</div>
  <div class="bg-green-200 p-4 rounded">1fr</div>
  <div class="bg-green-300 p-4 rounded">1fr</div>
</div>

Edit in playground

Horizontal scrolling card layout with fixed width columns

<!-- Horizontal scrolling content with fixed column widths -->
<div class="grid grid-flow-col auto-cols-[250px] gap-6 overflow-x-auto p-6 bg-gray-100 rounded-lg">
  <div class="bg-white p-4 rounded-lg shadow-md h-64">
    <h3 class="font-bold mb-2">Card 1</h3>
    <p>Each card has a fixed width of 250px.</p>
  </div>
  <div class="bg-white p-4 rounded-lg shadow-md h-64">
    <h3 class="font-bold mb-2">Card 2</h3>
    <p>The container scrolls horizontally when needed.</p>
  </div>
  <div class="bg-white p-4 rounded-lg shadow-md h-64">
    <h3 class="font-bold mb-2">Card 3</h3>
    <p>This creates a carousel-like effect.</p>
  </div>
  <div class="bg-white p-4 rounded-lg shadow-md h-64">
    <h3 class="font-bold mb-2">Card 4</h3>
    <p>You can add as many cards as needed.</p>
  </div>
  <div class="bg-white p-4 rounded-lg shadow-md h-64">
    <h3 class="font-bold mb-2">Card 5</h3>
    <p>The grid-flow-col makes items flow into new columns.</p>
  </div>
</div>

Edit in playground

Grid with repeating pattern of auto column sizes

<!-- Mixed auto columns sizes -->
<div class="grid grid-flow-col auto-cols-[min-content_1fr_max-content] gap-4 p-4 bg-gray-100 rounded-lg">
  <div class="bg-purple-100 p-4 rounded whitespace-nowrap">Min content (width of content)</div>
  <div class="bg-purple-200 p-4 rounded">Flexible (1fr)</div>
  <div class="bg-purple-300 p-4 rounded whitespace-nowrap">Max content (width of content)</div>
  
  <!-- These go into implicit columns -->  
  <div class="bg-purple-100 p-4 rounded whitespace-nowrap">Min content (next set)</div>
  <div class="bg-purple-200 p-4 rounded">Flexible (next set)</div>
  <div class="bg-purple-300 p-4 rounded whitespace-nowrap">Max content (next set)</div>
</div>

Edit in playground

Live Preview

Try the Grid Auto Columns utility with different values

Open Interactive Playground

Variants

auto-cols-auto: size based on content; auto-cols-min: minimum size to fit content (min-content); auto-cols-max: maximum size to fit content (max-content); auto-cols-fr: equal fraction of available space (1fr); also supports arbitrary values with auto-cols-[200px] syntax

autominmaxfr