Grid Fundamentals

Understand the core vocabulary of CSS Grid — grid container, grid item, rows, columns, tracks, lines, cells, and areas — as the foundation for every other Grid property.

While Flexbox is designed for laying items out along a single direction at a time, CSS Grid is designed for two-dimensional layout — rows and columns together. Grid lets you define an actual grid structure and place items precisely within it, which makes it the natural tool for full page layouts, image galleries, and dashboards. Before writing any Grid properties, it's essential to learn its vocabulary, because every Grid property refers back to these core terms.

Grid Container and Grid Item

Just like Flexbox, Grid has a container/item relationship. You create a grid container with display: grid (or display: inline-grid) on a parent element, and every direct child automatically becomes a grid item — no opt-in needed on the children themselves.

The key difference from Flexbox is intent: Flexbox items flow along one axis and wrap as needed, while Grid items are placed into an explicit two-dimensional structure of rows and columns that you define up front (or that Grid generates implicitly, which later lessons cover).

• Grid container: the element with display: grid • Grid item: any direct child of a grid container • Grid is inherently two-dimensional — rows and columns are defined together

Tracks, Lines, and Cells

A grid track is a single row or a single column — the space between two adjacent grid lines. You define the sizes of your tracks with grid-template-columns and grid-template-rows (covered in the next lesson).

A grid line is one of the dividing lines that make up the grid's structure — the horizontal and vertical lines that separate rows and columns. Grid lines are numbered automatically starting at 1, counting from the top-left corner of the grid: column line 1 is before the first column, column line 2 is between the first and second column, and so on. Lines are what you reference when placing items with properties like grid-column: 1 / 3.

A grid cell is the smallest unit of the grid — a single intersection of one row track and one column track, conceptually similar to a cell in a spreadsheet. Most of the time, a grid item occupies exactly one cell, but items can also span multiple cells to form a grid area.

• Track: a single row or column (the space between two adjacent lines) • Line: a dividing line between tracks, numbered starting at 1 • Cell: the smallest unit — one row track crossed with one column track • Grid items normally occupy one cell each, unless explicitly spanned

Grid Areas

A grid area is a rectangular group of one or more cells that a single item spans across — for example, a header that stretches across all three columns of the top row. Grid areas can be defined by referencing line numbers (grid-column / grid-row) or given human-readable names using grid-template-areas, which is covered in a later lesson on item placement.

Thinking in terms of rows, columns, lines, cells, and areas is what makes Grid so powerful for real layouts: rather than nudging boxes around with margins, you're literally describing a table-like structure and dropping content into specific coordinates or named regions within it.

Turning an element into a grid container

Without any grid-template-columns/rows, Grid falls back to a single implicit column — items simply stack as one column of rows until you define tracks explicitly

.container {
  display: grid; /* or display: inline-grid; */
}

Code Examples

This alone makes .layout a grid container. Its children become grid items, but with no explicit rows or columns defined yet, Grid places them into a single implicit column — one item per row — until we tell it otherwise in the next lesson.

Each of the four direct children — header, main, aside, footer — becomes a grid item the instant .layout gets display: grid, ready to be placed into specific rows, columns, or named areas.

.layout {
  display: grid;
}

<div class="layout">
  <header>Header</header>
  <main>Main content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

Rows, Columns, Lines, and Cells

Each letter (A-F) occupies one grid cell. The lines forming the borders are the numbered grid lines (column lines 1-4, row lines 1-3 in this example). A group of adjacent cells — like B and C together — would form a grid area.

Column 1   Column 2   Column 3
       +--------+----------+---------+
Row 1  |   A    |    B     |    C    |
       +--------+----------+---------+
Row 2  |   D    |    E     |    F    |
       +--------+----------+---------+

Important Rules

display: grid must be set on the parent; children become grid items automatically

Grid lines are numbered starting at 1, from the top-left of the grid

A track is a row or column; a cell is the intersection of one row track and one column track

Without explicit grid-template-columns/rows, Grid defaults to a single implicit column

Real-world usage

This vocabulary — tracks, lines, cells, areas — isn't just academic. Every Grid property you'll learn next (grid-template-columns, grid-column, grid-area, and so on) is defined directly in these terms, so a solid mental model here makes the rest of Grid feel logical instead of arbitrary.

Thinking display: grid alone creates visible rows and columns of a particular size display: grid only makes the element a grid container — actual row/column sizes must be defined with grid-template-columns and grid-template-rows

A common early misconception is expecting a grid layout to 'just appear' from display: grid alone. In reality it only opts the container into Grid layout mode; the structure itself still needs to be defined.

[Multiple Choice] In a CSS Grid with 4 columns, how many vertical grid lines exist, and what number is assigned to the line immediately before the third column? A. 4 lines total; the line before the third column is line 4 B. 5 lines total; the line before the third column is line 3 C. 3 lines total; the line before the third column is line 2 D. 5 lines total; the line before the third column is line 4

B. 5 lines total; the line before the third column is line 3 — A grid with N columns always has N+1 vertical lines, so 4 columns produce 5 lines. Numbering starts at 1 before the first column, so the line before the third column is line 3.

Without writing any CSS yet, sketch (in comments) how many grid lines a 3-column, 2-row grid would have in each direction, and label them.

/* 3 columns → 4 vertical column lines (1, 2, 3, 4) */ /* 2 rows → 3 horizontal row lines (1, 2, 3) */

Remember: the number of lines is always one more than the number of tracks in that direction.