What is CSS Grid?

CSS Grid creates two-dimensional layouts — rows and columns simultaneously. Perfect for page layouts, dashboards, image galleries, and any design requiring precise track control.

Grid works on the parent (grid container); children become grid items placed by line numbers, areas, or auto-placement.

Basic Grid 

  .grid {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}
  • fr — fractional unit; divides remaining space
  • gap — shorthand for row-gap and column-gap

Fraction Units and repeat() 

  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
Function Behavior
repeat(3, 1fr) 3 equal columns
minmax(250px, 1fr) Min 250px, grows to fill
auto-fit Collapses empty tracks
auto-fill Keeps empty tracks as gaps

Grid Areas

Named areas make layouts readable:

  .layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 150px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 1rem;
}

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

Each string row must have the same number of names. Use . for empty cells: "header header .".

Placing Items 

  .item {
    grid-column: 1 / 3;    /* lines 1 to 3 (spans 2 columns) */
    grid-row: 2 / 4;
    grid-area: 2 / 1 / 4 / 3;  /* row-start / col-start / row-end / col-end */
}

Negative line numbers count from the end: grid-column: 1 / -1 spans full width.

Alignment 

  .grid {
    justify-items: center;    /* items within their cell — horizontal */
    align-items: center;      /* items within their cell — vertical */
    justify-content: center;  /* grid tracks within container — horizontal */
    align-content: center;    /* grid tracks within container — vertical */
    place-items: center;      /* align-items + justify-items */
    place-content: center;    /* align-content + justify-content */
}

Implicit vs Explicit Grid

Explicit tracks come from grid-template-*. Extra items flow into implicit tracks:

  .grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-auto-flow: row; /* or column, dense */
}

grid-auto-flow: dense fills gaps but may reorder visual sequence — avoid for accessible content order.

Responsive Grid Without Media Queries 

  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

Cards wrap automatically as viewport shrinks — no breakpoints required.

Subgrid

Share parent grid tracks with nested grid (modern browsers):

  .parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.child {
    display: grid;
    grid-column: span 3;
    grid-template-columns: subgrid;
}

Subgrid aligns nested content to parent column lines.

Grid vs Flexbox

Use Grid when… Use Flexbox when…
Two-dimensional layout One-dimensional (row OR column)
Page-level structure Component-level alignment
Precise track sizing Content-driven sizing
Overlapping items Simple distribution

Use both: Grid for page layout, Flexbox for components inside grid cells.

Troubleshooting

Items overflow grid

  • Check minmax() minimums; add min-width: 0 on grid items with long content

Areas not applying

  • Verify each row in grid-template-areas has equal column count
  • Ensure grid-area names match exactly

Unexpected empty columns with auto-fit

  • Empty tracks collapse with auto-fit; use auto-fill to preserve gaps

Gap in older Safari

  • Use @supports fallback or margins for legacy support

CSS Grid is the most powerful layout tool in CSS — master it for professional page and component layouts.