Next ❯

Grid System

  • Introduction to grid layout utilities in Tailwind CSS.

  • What is CSS Grid ?

    CSS Grid is a two-dimensional layout system designed to handle rows and columns together.

    Unlike Flexbox (which works in one direction at a time), Grid allows you to:

    • Define rows and columns explicitly

    • Place items anywhere in the layout

    • Build complex, structured layouts easily

    In Tailwind CSS, CSS Grid is exposed through simple utility classes, but the concept remains pure CSS Grid.

    Why CSS Grid Was Created

    Before Grid, developers struggled with:

    • Page-level layouts

    • Equal-height columns

    • Complex dashboards

    • Magazine-style designs

    Flexbox helped with alignment, but:

    • It is one-dimensional

    • It becomes complex for large layouts

    CSS Grid was created to:

    • Solve layout structure problems

    • Replace hacks and nested flex containers

    • Make layouts predictable and readable

    CSS Grid is about structure, not just alignment.

    One-Dimensional vs Two-Dimensional Layout

    This distinction is critical.

    Flexbox

    • One direction at a time

    • Either row or column

    • Best for components

    Grid

    • Rows and columns together

    • Full layout control

    • Best for pages and sections

    Rule to remember:

    Flexbox = alignment & flow
    Grid = layout & structure

    Core Concepts of CSS Grid

    Before utilities, understand these core ideas.

    Grid Container

    A grid container is an element that uses:

    display: grid;

    It defines the layout rules.

    In Tailwind:

    <div class="grid">

    Grid Items

    • Direct children of the grid container

    • Automatically placed into grid cells

    • Can span rows or columns

Basic Grid Container

grid creates a grid container where direct children become grid items. 

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

  • Rows and Columns

    Grid layouts are defined by:

    • Columns → vertical tracks

    • Rows → horizontal tracks

    You decide:

    • How many columns

    • How many rows

    • How large they are

    This gives absolute control over layout.

    Why Grid Is Perfect for Page Layouts

    CSS Grid excels at:

    • Dashboards

    • Landing pages

    • Admin panels

    • Image galleries

    • Content-heavy layouts

    Example structure:

    • Sidebar

    • Header

    • Main content

    • Footer

    All managed cleanly with Grid.

    How Tailwind Uses CSS Grid

    Tailwind does not invent a new Grid system.

    Instead, it:

    • Exposes CSS Grid through utilities

    • Keeps syntax readable

    • Makes responsive grids easy

Grid Columns

grid-cols-3 creates three equal columns and gap-4 adds space between grid items. 

<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

  • This directly maps to:

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1rem;

    Grid vs Tables

    Grid is not for tabular data.
    FeatureGridTable
    PurposeLayoutData
    ResponsiveYesLimited
    Visual orderFlexibleFixed
    SemanticsLayout-basedData-based
    Use Grid for layout, tables for data.

  • Grid and Responsiveness

    Grid works beautifully with responsive design:

    • Change column count by screen size

    • Reposition elements easily

    • Maintain clean structure

Responsive Grid Columns

grid-cols-1 creates one column on small screens and md:grid-cols-3 switches to three columns on medium screens. 

<div class="grid grid-cols-1 md:grid-cols-3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

  • Use Case Overview

    CSS Grid is commonly used for:

    • App dashboards

    • Blog layouts

    • Product listings

    • Admin panels

    • Marketing pages

    Flexbox is still used inside grid cells for alignment.

    Grid + Flexbox Together 

    In real projects:

    • Grid handles page structure

    • Flexbox handles component layout

Grid and Flexbox Combined Layout

grid manages the page columns while flex aligns content inside the main section. 

<div class="grid grid-cols-12">
  <aside class="col-span-3">Sidebar</aside>
  <main class="col-span-9 flex items-center">Content</main>
</div>

  • This is industry-standard architecture.

    Common Misunderstandings

    • Thinking Grid replaces Flexbox completely

    • Using Grid for simple one-row layouts

    • Avoiding Grid due to “complexity”

    • Nesting unnecessary grids

    Grid is powerful when used for the right problem.

    Best Practices for CSS Grid

    • Use Grid for structure

    • Use Flexbox for alignment

    • Keep grid definitions simple

    • Avoid over-nesting

    • Design layout first, then content

Next ❯