Tailwind CSS Grid Auto Columns

The tailwind grid-auto-columns utility class allows you to control the width of grid items in a grid container when they don't have an explicit width defined. With Tailwind's grid-auto-columns class, you can easily set a default width for the columns in a grid layout.

Applying Tailwind Grid Auto Columns

To apply tailwind grid auto columns to a grid container, you can use the grid-auto-columns-{size} utility class, where {size} represents the desired width of the grid columns. The {size} can be one of the predefined sizes in Tailwind CSS, such as grid-auto-columns-auto, grid-auto-columns-1, grid-auto-columns-2, or you can customize the width using the sizing scale.

<div class="grid grid-cols-3 grid-auto-columns-1/3">
  <div class="bg-gray-200">Element 1</div>
  <div class="bg-gray-200">Element 2</div>
  <div class="bg-gray-200">Element 3</div>
</div>

Preview

In the above example, a grid container with 3 columns is created using grid-cols-3. The tailwind grid-auto-columns-1/3 class is applied to set the width of the grid columns to 1/3 of the container width.

Responsive Tailwind Grid Auto Columns

Tailwind CSS allows you to apply grid auto columns responsively at different breakpoints. To use responsive tailwind grid auto columns classes, you can append the breakpoint prefix to the grid auto columns class. For example, md:grid-auto-columns-1/2 sets the width of the grid columns to 1/2 of the container width starting from the medium breakpoint and above.

<div class="grid grid-cols-2 md:grid-cols-3 grid-auto-columns-1/2 md:grid-auto-columns-1/3">
  <div class="bg-gray-200">Item 1</div>
  <div class="bg-gray-200">Item 2</div>
  <div class="bg-gray-200">Item 3</div>
</div>

In the above example, a grid container with 2 columns by default (grid-cols-2) and 3 columns starting from the medium breakpoint and above (md:grid-cols-3) is created. The tailwind grid-auto-columns-1/2 class sets the width of the grid columns to 1/2 of the container width by default, and the md:grid-auto-columns-1/3 class sets the width to 1/3 of the container width starting from the medium breakpoint and above.

Tailwind grid auto columns class Table

Windframe Tailwind blocks

Team

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.