Chapter•95 Minutes

Items per page

CSS Grid Deep Dive

Master two-dimensional layout using grid tracks, areas, auto-placement, responsive grids, alignment, and advanced sizing.

Grid Container and Tracks

CSS Grid is a two-dimensional layout system designed to control rows and columns simultaneously. A grid container defines explicit or implicit tracks and places child elements into the resulting grid.

The fr unit represents a share of available grid space after fixed and intrinsic requirements are considered.

CSS Grid Tracks

Two-Column Grid

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
}

💡 The first column is 240px while the second consumes remaining available space.

Key Takeaways

Grid is two-dimensional.
fr distributes available space between flexible tracks.

Knowledge Check

What is CSS Grid particularly suited for?

repeat(), minmax() and auto-fit

Functions such as repeat() reduce repetitive track definitions. minmax() defines lower and upper track limits. Combined with auto-fit or auto-fill, these features enable responsive grids that can adapt without explicit breakpoint definitions.

A common pattern is repeat(auto-fit, minmax(250px, 1fr)).

Responsive Grid Track Sizing

Responsive Grid Without Breakpoints

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

💡 The browser automatically determines how many columns can fit while keeping each item within the defined size range.

Key Takeaways

minmax() expresses responsive track constraints.
auto-fit can create highly responsive grids without media queries.

Knowledge Check

Which function is commonly paired with `auto-fit` to create responsive grid columns?

Grid Template Areas

Named grid areas allow developers to describe a layout semantically. This is particularly useful for application shells containing headers, navigation, main content, and sidebars.

Named areas can be rearranged inside media queries without changing the HTML order.

Named Grid Areas

Application Shell

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}

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

💡 The layout becomes readable directly from the CSS declaration.

Key Takeaways

Named areas improve readability for complex layouts.
Grid areas can be rearranged responsively.

Knowledge Check

Which property assigns an element to a named grid area?

Grid Alignment

Grid provides container-level alignment through justify-items, align-items, justify-content, and align-content, while individual items can use justify-self and align-self.

As with Flexbox, distinguishing item alignment from track distribution is essential.

Grid Alignment Levels

Grid Alignment

.grid {
  display: grid;
  place-items: center;
  min-height: 400px;
}

💡 place-items is shorthand for align-items and justify-items, centering each grid item within its grid area.

Key Takeaways

place-items combines align-items and justify-items.
Grid distinguishes item alignment from distribution of the entire grid.

Knowledge Check

What does `place-items: center` do in Grid?

Explicit and Implicit Grids

Explicit tracks are created by declarations such as grid-template-columns and grid-template-rows. When items require additional tracks, the browser creates implicit tracks.

grid-auto-rows and grid-auto-columns allow developers to control those automatically generated tracks.

Explicit vs Implicit Grid

Implicit Row Sizing

.feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 1rem;
}

💡 Automatically created rows receive a minimum and flexible maximum size.

Key Takeaways

Explicit tracks are intentionally defined.
Implicit tracks are generated as needed.
Use grid-auto-* properties to control implicit tracks.

Knowledge Check

What creates implicit grid tracks?

Grid Container and Tracks

repeat(), minmax() and auto-fit

Grid Template Areas

Grid Alignment

Explicit and Implicit Grids

STAY UPDATED WITH BYTES!