Chapter 2.4☕ 18 min read

CSS Grid Layout

Two-dimensional layout system for rows and columns. Grid is the most powerful layout tool in CSS.

01What is CSS Grid?

CSS Grid is a two-dimensional layout system for the web. It lets you lay out items in rows and columns simultaneously -- something Flexbox cannot do.

🏢

Analogy: Think of CSS Grid like planning the layout of a Hyderabadi biryani restaurant -- rows of tables and columns of aisles, and you can place items exactly where you want them!

.grid-container {
  display: grid;                          /* Enables grid */
  grid-template-columns: 1fr 1fr 1fr;     /* Three equal columns */
  grid-template-rows: auto 200px auto;    /* Three rows */
  gap: 1rem;                              /* Gap between cells */
  padding: 1rem;
}

Key Difference: Flexbox = 1D (row OR column). Grid = 2D (rows AND columns simultaneously). Use Grid for page layouts and complex 2D arrangements. Use Flexbox for component layouts and 1D sequences.

02Grid Container Properties

Properties for the parent grid container:

PropertyValuesDescription

displaygrid | inline-gridEstablishes grid formatting context.

grid-template-columns<track-size> ...Defines column widths. Use 1fr for equal.

grid-template-rows<track-size> ...Defines row heights.

grid-template-areas<area-name>Named areas for visual layout.

gap<row-gap> <column-gap>Shorthand for gaps between rows/columns.

grid-auto-rows<track-size>Size of implicitly created rows.

grid-auto-columns<track-size>Size of implicitly created columns.

grid-auto-flowrow | column | denseControls auto-placement behavior.

/* Two columns -- 250px sidebar + remaining content */
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }

/* Three equal columns */
.columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* Responsive columns with minimum width */
.responsive { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }

/* Fixed + flexible mix */
.dashboard { display: grid; grid-template-columns: 200px 1fr 200px; gap: 1rem; }

03Grid Item Properties

Properties for individual grid items:

PropertyValuesDescription

grid-columnstart / endShorthand for column start and end lines.

grid-rowstart / endShorthand for row start and end lines.

grid-areaname | row/col valuesAssigns to named area, or sets all four lines.

justify-selfstretch | start | end | centerAligns item in cell horizontally.

align-selfstretch | start | end | centerAligns item in cell vertically.

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* Span multiple columns */
.item { grid-column: 1 / 3; }         /* From line 1 to line 3 (span 2 cols) */
.item { grid-column: 1 / -1; }        /* From first to last line (full width) */
.item { grid-column: span 2; }        /* Span 2 columns from current position */

/* Span rows */
.item { grid-row: 1 / 3; }            /* From row 1 to row 3 */
.item { grid-row: span 2; }           /* Span 2 rows */

/* Place in specific cell */
.item { grid-column: 2; grid-row: 3; } /* Column 2, row 3 */

/* Alignment within cell */
.item { justify-self: center; align-self: flex-end; }

04Grid Lines and Areas

Grid lines are numbered from 1. Areas let you name sections of your layout.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 100px 1fr 100px;
  grid-template-areas:
    "header  header  header"
    "sidebar content ads"
    "footer  footer  footer";
  gap: 1rem;
  height: 100vh;
}

.header  { grid-area: header;  background: #f97316; }
.sidebar { grid-area: sidebar; background: #3b82f6; }
.content { grid-area: content; background: #10b981; }
.ads     { grid-area: ads;     background: #8b5cf6; }
.footer  { grid-area: footer;  background: #ec4899; }

/* Use . for empty cells */
.grid-template-areas:
  "header  header  ."
  "sidebar content ads"
  "footer  footer  .";

💡

Pro Tip: repeat() function saves typing: repeat(3, 1fr) = 1fr 1fr 1fr. minmax(250px, 1fr) sets minimum and maximum size. Combine with auto-fit for responsive grids without media queries!

05Exercise -- Grid Layouts

Practice CSS Grid below. Build different layouts and see how grid places items.

Create grid-practice.html.

Use the starter code and experiment:

<!DOCTYPE html>
<html>
<head><style>
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; padding: 1rem; }
  .item { background: #f97316; color: white; padding: 1rem; border-radius: 4px; text-align: center; }
</style></head>
<body>
  <div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

Try these experiments:

Change grid-template-columns to 1fr 2fr 1fr -- middle column is wider Add grid-column: span 2 to an item -- it spans 2 columns Create a named area layout with header, sidebar, content, footer Use grid-auto-rows: 100px -- each row is 100px tall Resize the browser -- see how auto-fit minmax() makes it responsive

Done -- Key Points:

✅ CSS Grid = 2D layout (rows AND columns). Flexbox = 1D (row OR column). Use Grid for pages, Flexbox for components.
✅ grid-template-columns/rows define the grid structure. 1fr = one fraction of available space.
✅ gap adds spacing between rows and columns. repeat(3, 1fr) = 3 equal columns.
✅ grid-column: 1 / 3 spans from line 1 to 3. grid-column: 1 / -1 spans full width.
✅ grid-template-areas creates named visual layouts using ASCII art strings.
✅ auto-fit + minmax(250px, 1fr) = responsive grid without media queries.

Previous2.3 -- Advanced Flexbox 📋 All Chapters Next Chapter2.5 -- Advanced CSS Grid →