CSS Grid

CSS Grid is a two-dimensional layout system, meaning it can handle both rows and columns simultaneously. While Flexbox works in one direction at a time (either a row or a column), Grid allows precise placement of elements into both rows and columns at once — making it ideal for building full page layouts, dashboards, and image galleries.

Think of CSS Grid as drawing a table on the page and then placing items into specific cells or groups of cells.

Enabling CSS Grid

Grid is enabled by setting display: grid on the parent container. All direct children automatically become grid items.

.container {
    display: grid;
}

Defining Columns — grid-template-columns

This property defines how many columns the grid has and how wide each column is.

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;  /* Three equal 200px columns */
}

Using fr (fractional unit)

The fr unit divides the available space into fractions. It is the most powerful and commonly used unit in CSS Grid.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* Three equal columns */
    grid-template-columns: 1fr 2fr 1fr;  /* Middle column is twice as wide */
    grid-template-columns: 250px 1fr;    /* Fixed sidebar + flexible main content */
}

Using repeat()

The repeat() function shortens repetitive column definitions.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* Same as: 1fr 1fr 1fr 1fr */
}

Defining Rows — grid-template-rows

Works the same as grid-template-columns but for row heights.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 300px 80px;  /* Three rows with specific heights */
}

Gap Between Cells

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;           /* Same gap between rows and columns */
    column-gap: 30px;    /* Gap between columns only */
    row-gap: 15px;       /* Gap between rows only */
}

Placing Items — grid-column and grid-row

Grid items can be placed in specific positions using grid-column and grid-row. Values use grid line numbers (lines start at 1).

.header {
    grid-column: 1 / 4;   /* Spans from line 1 to line 4 (full 3-column width) */
    grid-row: 1 / 2;      /* First row only */
}

.sidebar {
    grid-column: 1 / 2;   /* First column */
    grid-row: 2 / 4;      /* Spans rows 2 and 3 */
}

.main {
    grid-column: 2 / 4;   /* Columns 2 and 3 */
    grid-row: 2 / 3;      /* Row 2 only */
}

Using span keyword

.wide-item {
    grid-column: span 2;  /* Spans 2 columns from its starting position */
}

.tall-item {
    grid-row: span 3;  /* Spans 3 rows from its starting position */
}

grid-template-areas

A named area layout is one of the most readable Grid features. Each cell is given a name, and then items are assigned to those names.

.container {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr 50px;
    gap: 10px;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

align-items and justify-items

These properties align grid items within their cells.

• justify-items — Aligns items horizontally within their cell (start, end, center, stretch).
• align-items — Aligns items vertically within their cell.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;  /* All items centered horizontally in their cells */
    align-items: center;    /* All items centered vertically in their cells */
}

Responsive Grid with auto-fill and minmax()

The combination of auto-fill (or auto-fit) with minmax() creates a grid that automatically creates as many columns as fit, with each column having a minimum and maximum size. No media queries needed.

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

On a wide screen, this creates four or five columns. On a small screen, it drops down to two or one column automatically.

Complete Page Layout Example

.page {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header"
        "sidebar content"
        "footer  footer";
    min-height: 100vh;
    gap: 0;
}

header { grid-area: header; background-color: #1a1a2e; color: white; padding: 20px; }
aside  { grid-area: sidebar; background-color: #f4f6f8; padding: 20px; }
main   { grid-area: content; padding: 30px; }
footer { grid-area: footer; background-color: #2c3e50; color: white; padding: 15px; }

Summary

CSS Grid is a powerful two-dimensional layout tool. grid-template-columns and grid-template-rows define the grid structure. The fr unit distributes space proportionally. gap handles spacing. Items can be placed precisely using grid-column and grid-row, or given descriptive names with grid-template-areas. The auto-fill with minmax() pattern creates responsive grids without media queries — one of the most powerful features in modern CSS.