Know if you're actually ready. Take the HTML & CSS quiz → get your AI readiness report.Take the free test →

Study guide · HTML & CSS

CSS Grid: Complete Guide to Grid Layout

CSS Grid is the most powerful layout system. Here's what interviews test — defining grids, fr units, and grid areas.

Examifyr·2026·6 min read

Defining a grid

display: grid turns an element into a grid container. grid-template-columns and grid-template-rows define the tracks.

.grid {
    display: grid;

    /* 3 equal columns */
    grid-template-columns: 1fr 1fr 1fr;

    /* or using repeat() */
    grid-template-columns: repeat(3, 1fr);

    /* mixed units */
    grid-template-columns: 250px 1fr 2fr;

    /* rows */
    grid-template-rows: 80px 1fr 60px;

    gap: 16px;        /* all gaps */
    column-gap: 24px; /* horizontal gaps only */
    row-gap: 16px;    /* vertical gaps only */
}

Notefr (fraction) is a flexible unit unique to CSS Grid. 1fr takes up one fraction of available space after fixed tracks are placed.

Placing items

Grid items can be placed explicitly using column and row start/end positions.

.header {
    grid-column: 1 / 4;  /* spans columns 1-3 */
    grid-row: 1 / 2;
}

/* Shorthand */
.sidebar {
    grid-column: 1;         /* occupies column 1 */
    grid-row: 2 / 4;        /* spans rows 2-3 */
}

/* Span keyword */
.wide {
    grid-column: span 2;    /* span 2 columns from current */
}

Named grid areas

grid-template-areas defines a visual ASCII-art layout. Items are placed by name.

.layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 64px 1fr 48px;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
    min-height: 100vh;
}

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

NoteUse a dot (.) for empty cells in grid-template-areas.

auto-fill and auto-fit

These create responsive grids without media queries.

/* auto-fill: creates as many columns as fit */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
/* At 900px: 3 columns. At 600px: 2 columns. etc. */

/* auto-fit vs auto-fill:
   auto-fill: keeps empty tracks, doesn't stretch items
   auto-fit: collapses empty tracks, items stretch to fill */

NoteThe repeat(auto-fill, minmax(280px, 1fr)) pattern is the most-used responsive grid technique. No media queries needed.

Grid vs Flexbox — when to use which

Grid is for two-dimensional layouts (rows AND columns). Flexbox is for one-dimensional layouts (row OR column).

/* Use GRID for: */
/* - Page layouts with both rows and columns */
/* - Card grids / galleries */
/* - Anything that needs precise 2D control */

.page-layout {
    display: grid;
    grid-template: "header" 64px "main" 1fr "footer" 48px / 1fr;
}

/* Use FLEXBOX for: */
/* - Navigation bars */
/* - Centering a single item */
/* - One-dimensional lists */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Exam tipThe most common Grid interview question: "When do you use Grid vs Flexbox?" — Grid for 2D layout (you need to control both rows and columns simultaneously). Flexbox for 1D layout (items in a single row or column).