TailwindCSS Tip : Grid Template

Build layouts with Grid: [grid-template-columns:auto_1fr]

Last edited :

TailwindCSS allows you to leverage CSS Grid for more intuitive and concise layouts. While a flex layout is commonly used for aligning elements horizontally, CSS Grid can often simplify the code, especially for complex alignment and spacing.

Here’s how you can replace a flex layout with grid-template-columns:auto_1fr for a cleaner, more maintainable structure.

Using Grid Layout for Better Alignment

Instead of using a flex layout like this:

Méschac Irung
John Doe
Software Engineer
<div class="flex items-center gap-2">
    <img class="size-10 rounded-full" src="https://avatars.githubusercontent.com/u/47919550?v=4" alt="Méschac Irung" width={320} height={320} />
    <div class="w-10/12">
        <div class="text-base font-medium text-gray-950 dark:text-white">John Doe</div>
        <div class="text-sm text-gray-500">Software Engineer</div>
    </div>
</div>

In this example, the div with w-10/12 is intended to occupy the remaining space of the parent div. However, it won’t fully occupy the rest of the parent div as intended. To see this, hover over the demo component.

You can achieve the same layout using a grid layout for better alignment:

Méschac Irung
John Doe
Software Engineer
<div class="grid [grid-template-columns:auto_1fr] items-center gap-2">
    <img class="size-10 rounded-full" src="https://avatars.githubusercontent.com/u/47919550?v=4" alt="Méschac Irung" width={320} height={320} />
    <div>
        <div class="text-base font-medium text-gray-950 dark:text-white">John Doe</div>
        <div class="text-sm text-gray-500">Software Engineer</div>
    </div>
</div>

The grid-template-columns:auto_1fr arbitrary property ensures that the second div occupies the remaining space of the parent div, providing a cleaner and more maintainable layout.

How grid-template-columns:auto_1fr Works

The grid-template-columns CSS property defines the column structure of a grid container. It specifies the number and size of the columns in the grid layout.

In the previous example, grid-template-columns:auto_1fr is used to create a grid with two columns:

  • auto: This means the width of the first column will be determined by the content inside it. The column will be just wide enough to fit its content.
  • 1fr: This stands for “one fraction” of the remaining space. The second column will take up the remaining space in the grid container after the first column has been sized.

So, this CSS property creates a grid with two columns:

  • The first column’s width is based on its content.
  • The second column takes up the remaining available space.

Sidebar and Main Content example

Here’s an example of a sidebar and main content layout using grid-template-columns:auto_1fr:

Main Content
<body class="grid [grid-template-columns:auto_1fr] divide-x divide-gray-200 dark:divide-gray-800">
    <aside class="bg-gray-50 dark:bg-gray-925 p-4 w-44">
        <span class="text-gray-500 text-sm">Sidebar </span>
    </aside>
    <main class="bg-white dark:bg-gray-900 p-4">
        <span class="text-gray-500 text-sm">Main Content </span>
    </main>
</body>

Resizable Sidebar and Main Content example

Here’s an example of a sidebar and main content layout using grid-template-columns:auto_1fr:

Main Content
<body class="grid [grid-template-columns:auto_1fr] divide-x divide-gray-200 dark:divide-gray-800">
    <aside class="bg-gray-50 dark:bg-gray-925 p-4 resize-x overflow-hidden min-w-44 max-w-72">
        <span class="text-gray-500 text-sm">Sidebar </span>
    </aside>
    <main class="bg-white dark:bg-gray-900 p-4">
        <span class="text-gray-500 text-sm">Main Content </span>
    </main>
</body>

In the examples above, I only covered the grid-template-columns: auto 1fr property. You can also use grid-template-rows to define the row structure of a grid container. The grid-template-rows property works similarly to grid-template-columns but for rows instead of columns.

Additionally, you can cover as many columns or rows as you want, in different positions. For example, you can mix auto, 1fr, and other values in various orders to achieve the desired layout. Here are a few examples:

  • grid-template-columns: 1fr auto: This layout will have a flexible column first, followed by an automatically sized column.
  • grid-template-columns: auto 1fr auto: This layout will have an automatically sized column, followed by a flexible column, and then another automatically sized column.
  • grid-template-rows: auto 1fr: This layout will have an automatically sized row first, followed by a flexible row.
  • grid-template-rows: 1fr auto 1fr: This layout will have a flexible row, followed by an automatically sized row, and then another flexible row.

By combining different values, you can create complex and responsive grid layouts that adapt to your content and design needs.

Become 70x More Confident with TailwindCSS

Elevate your TailwindCSS skills with over 70 expert-crafted tips. Get access to 50 actionable tips today and start building faster, smarter, and more confidently.