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:
<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:
<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
:
<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:
<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.