Tailwind CSS: Creating a 20/80 Grid Layout

If you need to create a grid where the first column occupies 20% of the width and the second column takes up 80% using Tailwind CSS, here are a few ways to achieve it.

Using `grid-cols-[20%_80%]` (Tailwind v3+)

Since Tailwind CSS v3 introduced support for arbitrary values, you can directly specify column widths like this:

<div class="grid grid-cols-[20%_80%] gap-4">
  <div class="bg-blue-500 p-4">20% Width</div>
  <div class="bg-red-500 p-4">80% Width</div>
</div>

This method ensures precise column distribution without modifying your Tailwind configuration.

Using `grid-cols-5` and `col-span`

Another way to achieve the same effect is by using a 5-column grid and spanning columns:

<div class="grid grid-cols-5 gap-4">
  <div class="col-span-1 bg-blue-500 p-4">20% Width</div>
  <div class="col-span-4 bg-red-500 p-4">80% Width</div>
</div>

Here, we create a grid-cols-5 layout, where the first column spans 1/5 (20%) and the second spans 4/5 (80%).

Using Flexbox Instead of Grid

You can also achieve a similar layout using Flexbox:

<div class="flex">
  <div class="w-1/5 bg-blue-500 p-4">20% Width</div>
  <div class="w-4/5 bg-red-500 p-4">80% Width</div>
</div>

This approach is useful when working with flexible layouts that do not require strict grid structures.

Customizing Grid Columns in `tailwind.config.js`

If you need to reuse this layout frequently, you can extend the Tailwind configuration:

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        '20/80': '20% 80%',
      },
    },
  },
}

Then, use it in your HTML:

<div class="grid-cols-20/80 grid gap-4">
  <div class="bg-blue-500 p-4">20% Width</div>
  <div class="bg-red-500 p-4">80% Width</div>
</div>

FAQs

1. Which method is best for a responsive design?

Using grid-cols-[20%_80%] is the most flexible for modern browsers. However, grid-cols-5 with col-span is also a good choice for complex layouts.

2. Can I use `fr` units instead of percentages?

Yes, you can use fr units like this:

<div class="grid grid-cols-[1fr_4fr] gap-4">
  <div class="bg-blue-500 p-4">1fr</div>
  <div class="bg-red-500 p-4">4fr</div>
</div>

This maintains a 20/80 ratio but adapts better to varying screen sizes.

3. How do I make this layout responsive?

You can adjust the column widths for different screen sizes:

<div class="grid grid-cols-1 gap-4 md:grid-cols-[20%_80%]">
  <div class="bg-blue-500 p-4">Sidebar</div>
  <div class="bg-red-500 p-4">Main Content</div>
</div>

This stacks columns on smaller screens and switches to a grid on medium-sized screens (md: breakpoint).