Course Outline (Part 9)

Welcome to Part 9 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore CSS Grid: Columns, Rows & Areas.

While Flexbox is a powerful one-dimensional layout system (row or column), CSS Grid is a full two-dimensional layout model. It allows you to align items along both horizontal rows and vertical columns simultaneously, enabling the construction of complex page structures and app dashboard layouts without requiring wrapping container divs.

Chapter 65: The Grid Paradigm: 1D vs. 2D Layouts

Understanding when to use Flexbox vs. Grid is essential for styling design:

Feature	Flexbox (1D)	CSS Grid (2D)
Dimensions	One Axis (Row or Column)	Two Axes (Row and Column)
Design Model	Content-First: Items distribute space based on their own size.	Layout-First: Items fit into predefined tracks.
Typical Use	Navigation headers, small buttons groups, linear content feeds.	Full-page layouts, dashboards, complex card grids, photo collages.

65.1 Content-First vs. Layout-First

Flexbox Content-First: You let the items declare their sizes (width, flex-basis), and Flexbox distributes them along the row. Sizing is dynamic and flows from individual elements outward.
Grid Layout-First: You define the grid structure first (e.g., a 12-column grid or sidebar-main template), and then place elements into cells. Elements conform to the parent track boundaries.

Chapter 66: Grid Containers & Track Definitions

To create a grid context, declare the display property on the parent:

display: grid: Creates a block-level grid.
display: inline-grid: Creates an inline-level grid.

66.1 Defining Columns and Rows

You define the tracks (columns and rows) using grid-template-columns and grid-template-rows:

.grid-container {
  display: grid;
  /* Creates three columns of specified widths */
  grid-template-columns: 200px 300px 200px;
  /* Creates two rows of specified heights */
  grid-template-rows: 100px 200px;
}

Chapter 67: Sizing Tracks: fr, repeat(), and minmax()

CSS Grid introduces powerful sizing units and functions designed to make grids fluid and responsive.

67.1 The Fractional Unit (`fr`)

The fr unit represents a fraction of the available space inside the grid container.

.col-container {
  display: grid;
  /* Three columns: Column 2 is twice as wide as 1 and 3 */
  grid-template-columns: 1fr 2fr 1fr;
}

67.2 Mixed Sizing Math

Suppose a grid container is 1000px wide. You declare:

grid-template-columns: 200px 1fr 3fr;

The browser allocates the absolute track first: 200px.
Remaining space $= 1000\text{px} - 200\text{px} = 800\text{px}$.
Remaining space is divided by the total fractions ($1 + 3 = 4$ parts). Each part $= 200\text{px}$.
Track 2 $= 200\text{px}$ ($1 \times 200$).
Track 3 $= 600\text{px}$ ($3 \times 200$).

67.3 The `repeat()` Function

Avoids repeating values when creating identical columns or rows:

/* Verbose */
.grid { grid-template-columns: 100px 100px 100px 100px; }

/* Shorthand */
.grid-shorthand { grid-template-columns: repeat(4, 100px); }

67.4 The `minmax()` Function

Defines a size range (minimum and maximum bounds) for tracks:

.card-grid {
  display: grid;
  /* Columns can shrink to 200px, but stretch to fill space if available */
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

Chapter 68: Explicit vs. Implicit Grids

68.1 Explicit Grid

Tracks you declare explicitly using grid-template-columns and grid-template-rows.

68.2 Implicit Grid

If you have more content items than cells in your explicit grid, the browser automatically creates new rows or columns to contain them. This is the Implicit Grid. You configure implicit tracks using:

grid-auto-rows: Sets height for automatically created rows.
grid-auto-columns: Sets width for automatically created columns.
grid-auto-flow: Determines whether auto items flow into row (Default), column, or dense (packs empty spaces).

.feed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Explicitly 2 columns */
  grid-auto-rows: 150px; /* Implicit rows automatically render at 150px height */
}

Chapter 69: Grid Template Areas (`grid-template-areas`)

Grid areas allow you to name grid zones visually in your CSS, creating a map of where elements should reside.

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

/* Placed children anchor to areas using grid-area */
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

Dots (.): To leave a grid cell empty, use a period . in the template areas list (e.g. "sidebar .").
Valid names: Area names must contain valid CSS characters and cannot start with numbers. Multiple cells sharing a name must form a rectangular bounding box (L-shapes or T-shapes are invalid and fail to parse).

Chapter 70: Grid Layouts Practice & Self-Check

70.1 Practice Exercises

Exercise 1: Responsive Grid Columns: Create a card grid where columns automatically adapt to fit screen widths using auto-fit:

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

Exercise 2: Holy Grail Layout: Define a 3-column site layout with header, main content, sidebar, ads widget, and footer using template areas.

.site-grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas:
    "header header header"
    "sidebar main ads"
    "footer footer footer";
}

Exercise 3: Dashboard Layout with Empty Cell: Create a dashboard with a header, side controls, and main views, leaving the top-left slot empty.

.dash-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-areas:
    ". header"
    "aside main";
}

70.2 Self-Check Questions

What is the main difference between Flexbox and CSS Grid?
- Answer: Flexbox handles one-dimensional layouts (rows or columns), while CSS Grid handles two-dimensional layouts (rows and columns simultaneously).
What unit represents a fraction of the available space in a grid?
- Answer: The fractional unit (fr).
What does repeat(3, 1fr) expand to?
- Answer: 1fr 1fr 1fr.
What property controls the height of automatically generated rows?
- Answer: grid-auto-rows.
How do you assign an element to a named grid area?
- Answer: Set its grid-area property to match the area name declared in grid-template-areas.
What does a period (.) represent inside grid-template-areas?
- Answer: An empty, unassigned grid cell.
What is the purpose of the minmax() function?
- Answer: It constrains track sizing between a minimum bounds (e.g. 200px) and a maximum bounds (e.g. 1fr).
Does grid-auto-flow: column flow items horizontally or vertically?
- Answer: Vertically (it packs items into columns instead of rows).
What is the default value of grid-auto-flow?
- Answer: row.
Can you use flex properties inside grid elements?
- Answer: Flex items require a flex container. However, grid cells themselves can contain flex container nodes.
What is the difference between auto-fill and auto-fit in column repeating?
- Answer: auto-fill keeps empty columns as blank space, whereas auto-fit collapses empty columns to 0 width, stretching active columns to fill container space.
How does grid-auto-rows: minmax(100px, auto) behave?
- Answer: Implicit rows will start at 100px height, but grow dynamically if content requires more vertical space.
Are quotes required around area names in grid-template-areas?
- Answer: Yes, each row’s area map string must be wrapped in quotation marks.
Are quotes required in grid-area item links?
- Answer: No, grid-area: header; takes a direct identifier token (no quotes).
Can grid areas overlap?
- Answer: Yes, you can position multiple elements into the same grid area using grid-area, laying them on top of each other using z-index.
What happens to grid tracks if the fractional unit values sum up to less than 1?
- Answer: They will occupy only that fraction of the container’s space, leaving the rest of the grid container empty. E.g. 0.5fr 0.2fr takes 70% space.
Can you declare non-adjacent identical grid area names inside grid-template-areas?
- Answer: No, all cells sharing an area name must be contiguous and form a rectangle, otherwise the layout map is syntax invalid.
How do you change track alignment vertically inside grid containers?
- Answer: Use align-content (or align-items to align cells vertically inside tracks).
Can inline-grid have a fixed width?
- Answer: Yes, you can style inline-grid with widths, margins, and heights.
Under grid-template-columns: 10% 1fr 1fr, how is space distributed?
- Answer: Column 1 takes exactly 10% of container width, and the remaining 90% is divided equally between columns 2 and 3.

Discussion

Loading comments...