CSS Grid Introduction

1. Introduction

CSS Grid is a two-dimensional layout system. Unlike Flexbox (which is one-dimensional — rows OR columns), Grid lets you control both rows and columns at the same time.

With CSS Grid you can build layouts that were previously impossible without complex hacks — photo galleries, newspaper-style layouts, dashboards, and complex forms — all with clean, minimal CSS.

CSS Grid and Flexbox are complementary:

• Grid — for the overall page layout structure (rows AND columns)
• Flexbox — for component internals (aligning items within a component)

In practice, most professional layouts use both. This lesson introduces the Grid model, key terminology, and how to activate it.

2. Theory

Activating Grid

.container {
  display: grid;
  /* Without any other properties, children stack in a single column */
}

Key Terminology

grid-template-columns

Defines the number and size of columns.

/* Three fixed columns */
grid-template-columns: 200px 400px 200px;

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

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

/* Mixed: sidebar + main */
grid-template-columns: 250px 1fr;

/* Auto-fit with min/max — responsive without media queries */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

The fr Unit

The fr (fraction) unit represents a fraction of the available space in the grid. It is unique to CSS Grid.

/* On a 1000px container: */
grid-template-columns: 1fr 2fr 1fr;
/* Column 1: 250px (1/4), Column 2: 500px (2/4), Column 3: 250px (1/4) */

grid-template-columns: 300px 1fr;
/* Column 1: fixed 300px, Column 2: remaining 700px */

grid-template-rows

grid-template-rows: 64px 1fr 80px; /* header, content, footer */
grid-template-rows: repeat(3, 200px); /* 3 rows, 200px each */
grid-template-rows: auto;   /* rows size to content (default) */

gap

gap: 16px;           /* equal gap between rows and columns */
gap: 24px 16px;      /* row-gap: 24px, column-gap: 16px */
row-gap: 24px;
column-gap: 16px;

Grid vs Flexbox: When to Use Which

3. Real World Example

CSS Grid is used for:

• Newspaper/magazine layouts — articles spanning multiple columns
• Dashboard layouts — widgets of different sizes arranged on a grid
• Photography portfolio — masonry-style or Pinterest-like image grids
• E-commerce product grids — products in 3 or 4 columns that wrap responsively
• Application shell — header, sidebar, main content, footer — the outer frame of a web app

Examples in the wild: the GitHub profile page, Notion's workspace layout, any admin dashboard, Twitter's three-pane layout.

4. Code Example

<!-- HTML -->
<div class="page">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

/* Page layout with Grid */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;     /* sidebar + main */
  grid-template-rows: 64px 1fr 60px;   /* header + content + footer */
  min-height: 100vh;
  gap: 0;
}

.header {
  grid-column: 1 / -1;  /* span all columns (from line 1 to last line) */
  background: #1e293b;
  color: white;
  padding: 0 24px;
  display: flex;
  align-items: center;
}

.sidebar {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  padding: 24px;
}

.main {
  padding: 24px;
  overflow-y: auto;
}

.footer {
  grid-column: 1 / -1;  /* span all columns */
  background: #0f172a;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Simple equal-column grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Responsive grid — wraps automatically */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

5. Code Breakdown

grid-template-columns: 250px 1fr

Two columns: the first is always 250px (sidebar), the second takes all remaining space (main content). On a 1000px container, main gets 750px.

grid-template-rows: 64px 1fr 60px

Three rows: header (64px), content area (flexible), footer (60px). The 1fr row grows to fill whatever space remains after header and footer take their fixed heights.

grid-column: 1 / -1

Span from grid line 1 (leftmost) to -1 (the last grid line, regardless of how many columns). This makes the header and footer stretch across all columns without needing to know the exact number of columns.

repeat(auto-fit, minmax(240px, 1fr))

The most powerful responsive grid pattern. auto-fit creates as many columns as will fit. Each column is at least 240px wide, at most 1fr of available space. On a 1000px container: 4 columns (4×250). On 700px: 2 columns. On 300px: 1 column. No media queries needed!

gap: 0

The page layout uses gap: 0 because we want the sidebar to touch the header/footer edges. The inner content uses its own padding instead of gap.

6. Common Mistakes

• Using Grid when Flexbox is simpler. A single row of items with equal spacing is simpler with Flexbox. Grid is best for two-dimensional layouts.
• Forgetting that fr distributes the remaining space, not total space. grid-template-columns: 200px 1fr 1fr — the 200px column takes its space first, then the two 1fr columns split the rest equally.
• Expecting grid lines to number from 0. Grid lines start at 1, not 0. The first column starts at line 1, ends at line 2.
• Not understanding auto-placement. By default, grid items are placed automatically in order, filling cells left-to-right, top-to-bottom. You can override this with explicit placement (covered in Lesson 3).

7. Best Practices

• Use Grid for page/section structure, Flexbox for component internals.
• Use repeat(auto-fit, minmax(Xpx, 1fr)) for responsive grids without media queries.
• Use the fr unit for proportional columns instead of percentages.
• Use gap for consistent spacing — do not add margins to grid items.
• Use grid-column: 1 / -1 to span full width without knowing the exact column count.

8. Practice Exercise

1. Create a container with 6 divs. Add display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;. Observe the automatic 3-column layout.
2. Change to grid-template-columns: 1fr 2fr 1fr;. Notice the middle column is twice as wide.
3. Create a page shell: header (full width), sidebar (250px), main (1fr), footer (full width). Use grid-column: 1 / -1 for header and footer.
4. Create a responsive photo grid using repeat(auto-fit, minmax(200px, 1fr)). Resize the browser and watch columns reflow.

9. Assignment

Build an e-commerce category page using CSS Grid:

• A page shell: header, filter sidebar (250px left), product area (right), footer
• Inside the product area: a responsive grid of product cards using auto-fit, minmax(220px, 1fr)
• Each product card has: image (full width), name, price, and "Add to Cart" button
• The header spans the full width
• Gap of 24px between all grid items

10. Interview Questions

Q1: What is CSS Grid and how does it differ from Flexbox?

Answer: CSS Grid is a two-dimensional layout system that lets you control both rows and columns simultaneously. Flexbox is one-dimensional — you work with either a row or a column. Grid is ideal for overall page structure and complex two-dimensional layouts. Flexbox is ideal for aligning items within a single row or column.

Q2: What is the fr unit?

Answer: The fr (fraction) unit is unique to CSS Grid. It represents a fraction of the available free space in the grid container. After fixed/min-content items take their space, remaining space is divided by total fr values. For example, in 1fr 2fr 1fr, space is divided into 4 parts — first and last get 1/4 each, middle gets 2/4.

Q3: What does repeat(auto-fit, minmax(250px, 1fr)) do?

Answer: It creates a responsive grid that automatically adjusts the number of columns. Each column is at minimum 250px and at maximum 1fr of available space. As the container narrows, columns wrap to new rows automatically. No media queries needed for basic responsive behaviour.

Q4: What is a grid line and how are they numbered?

Answer: Grid lines are the dividing lines between tracks (rows and columns). They are numbered starting from 1 for the first line. A grid with 3 columns has 4 vertical lines: 1, 2, 3, 4. Negative numbers count from the end: -1 is always the last line, -2 is second from last.

Q5: When would you use Grid over Flexbox?

Answer: Use Grid for: overall page layouts (header/sidebar/main/footer), any design requiring two-dimensional control, complex card layouts where you need items to align across both rows and columns, and layouts where you want to define both row and column sizes upfront. Use Flexbox for single-direction component layouts.

11. Additional Resources

• CSS-Tricks — A Complete Guide to Grid (search "css-tricks complete guide grid")
• Grid Garden — cssgridgarden.com (interactive Grid learning game)
• MDN Web Docs — CSS Grid Layout (search "MDN CSS grid layout")
• web.dev — Learn CSS Grid (search "web.dev learn css grid")
• Grid by Example — gridbyexample.com (patterns by Rachel Andrew)