Roadmap Blog
refactoring
use of
how to create
when to use
mistakes to avoid
Tip 6/72

Grid Template

Simplify with grid-cols-[auto_1fr]

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-cols-[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-cols-[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 [auto_1fr] arbitrary value ensures that the second div occupies the remaining space of the parent div, providing a cleaner and more maintainable layout.

How grid-cols-[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-cols-[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-cols-[auto_1fr]:

Main Content 
<body class="grid grid-cols-[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-cols-[auto_1fr]:

Main Content 
<body class="grid grid-cols-[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.