Nested Grids in Tailwind CSS

Nested grids are layouts where a grid item itself becomes a grid container. This is useful for building complex designs that require multiple grid layers.

1. Basic Nested Grid

Below, we define a parent grid with two columns and nest a child grid inside one of its items:

<div class="grid grid-cols-2 gap-4 p-4 bg-gray-100">
    <div class="bg-blue-200 p-4">Parent Item 1</div>

    <div class="bg-blue-300 p-4">
        <p class="font-semibold mb-2">Parent Item 2 (Nested Grid)</p>
        <div class="grid grid-cols-2 gap-2">
            <div class="bg-white p-2">Nested 1</div>
            <div class="bg-white p-2">Nested 2</div>
            <div class="bg-white p-2">Nested 3</div>
            <div class="bg-white p-2">Nested 4</div>
        </div>
    </div>
</div>

2. Styling Tips

Use consistent padding and gap between parent and nested grids.
Apply background and border styles to help visually distinguish nested structures.
You can also nest grids inside flex containers if needed.

3. Responsive Nested Grids

You can apply responsive classes within nested grids to adapt the layout on different devices:

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="p-4 bg-yellow-100">Sidebar</div>
    <div class="p-4 bg-yellow-200">
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
            <div class="bg-white p-2">1</div>
            <div class="bg-white p-2">2</div>
            <div class="bg-white p-2">3</div>
        </div>
    </div>
</div>

Conclusion

Nested grids in Tailwind CSS offer great flexibility for complex layouts. They work seamlessly with Tailwind's utility classes, allowing precise and responsive design control.

← Previous: Grid Areas and Placement Next: Responsive Grid Layouts →