Grid Lines and Areas in CSS

What You Learn From This Page

• How column and row lines form Grid track boundaries.
• How start and end lines place items across cells and areas.
• How span and negative line numbers create adaptable placement.
• How named lines communicate structural boundaries.
• How grid-template-areas defines readable page regions.
• How numeric lines, named lines, and named areas differ.
• How manual and automatic placement work together.
• How responsive rearrangement, overlays, and accessibility affect production layouts.

Introduction

CSS Grid lines define the boundaries around row and column tracks. Grid areas use those boundaries to identify rectangular regions where items can be placed. Together they provide two complementary ways to describe layout: precise coordinates for track-level control and readable region names for larger structural designs.

Lines are fundamental even when an author never writes a line number. Every explicit row and column creates start and end boundaries, auto-placement uses those boundaries, and named areas generate related named lines. Understanding lines removes the common confusion between a track, a cell, and the endpoint numbers used by placement properties.

The practical goal is not to place every item manually. Repeated content is usually best handled by auto-placement, while selected items span tracks or occupy semantic areas. A strong layout uses the least placement code needed to express meaningful exceptions and stable page regions.

What Is a Grid Line?

A Grid line is a boundary separating tracks. Column lines run in the block direction and bound vertical column tracks in a common horizontal writing mode. Row lines run in the inline direction and bound horizontal row tracks. The visual direction can change with writing mode, but their role as boundaries remains the same.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Three columns require four column lines: one before the first track, two between tracks, and one after the final track. This gives the rule that N tracks require N plus one boundary lines.

Row Lines Follow the Same Model

Two explicit row tracks produce three horizontal row lines. Those lines can be used as starting and ending coordinates independently from the column line system.

.container {
  display: grid;
  grid-template-rows: 100px 200px;
}

Column and row numbering both begin at 1 from their respective start sides. Negative numbers count backward from the end of the explicit grid.

Lines, Tracks, Cells, and Areas

A track is the space between adjacent lines. A cell is the intersection of one row track and one column track. An area is a rectangular region containing one or more cells. Placement values identify the boundary lines around the item rather than numbering cells directly.

If an item begins at column line 1 and ends at line 3, it occupies the tracks between 1 and 2 and between 2 and 3. It therefore spans two columns, not three. This boundary model prevents off-by-one mistakes.

Place an Item with Column Lines

The grid-column shorthand combines grid-column-start and grid-column-end. A slash separates the two line references.

.featured {
  grid-column: 1 / 3;
}

The item starts at line 1 and ends before line 3, covering two column tracks. Other items may auto-place around the occupied area according to available cells and auto-flow rules.

Place an Item with Row Lines

The row system uses the equivalent grid-row shorthand. An item from row line 1 to line 3 spans two row tracks.

.featured {
  grid-row: 1 / 3;
}

Longhand start and end properties are valid when values are changed independently or generated by a component API, but shorthands are generally clearer for a complete placement rule.

Combine Row and Column Coordinates

Specifying both axes defines a rectangular Grid area. The following item covers four cells arranged across two rows and two columns.

.featured {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

The item fills its assigned area according to normal Grid alignment behavior. Its content does not become four independent pieces; the entire item occupies one rectangular region.

Use span for Track Counts

The span keyword expresses the number of tracks an item should occupy. It is useful when the extent matters more than the absolute ending line.

.featured {
  grid-column: 1 / span 2;
  grid-row: span 2;
}

The column begins at line 1 and covers two tracks. The row start can be determined by auto-placement, but the item still occupies two row tracks. This makes span especially useful for featured cards in otherwise automatic collections.

Span Without an Explicit Start

An item can declare only grid-column: span 2. The auto-placement algorithm searches for a position that can accommodate a two-column item. Depending on the sequence and available holes, the item may move to a later row rather than fit into the next single cell.

Test mixed-span grids with realistic content order. Dense packing can fill earlier holes but may make visual order diverge from source order, which is a serious concern for interactive content.

Use Negative Line Numbers

Negative references count backward from the final explicit Grid line. The most common pattern spans all explicit columns.

.full-width {
  grid-column: 1 / -1;
}

This remains valid when the explicit template changes from two columns to four. Hard-coding line 5 would be coupled to the four-column version.

Understand What -1 References

The value -1 means the final line of the explicit grid. It does not automatically include arbitrary implicit tracks created beyond that template. If placement unexpectedly generates implicit columns, a full-width item spanning 1 / -1 still targets the explicit structure.

Other negative values are valid. A placement from -3 to -1 covers the final two explicit tracks. Positive and negative endpoints can be combined when that makes the intended boundary clearest.

Full-Width Headers and Footers

Page shells commonly place headers and footers across every explicit column while a sidebar and main region share the middle row.

.site-header,
.site-footer {
  grid-column: 1 / -1;
}

Line placement is concise for this exception and does not require a named area template. When the complete page structure has several stable regions, named areas may communicate it more clearly.

Name Structural Grid Lines

Line names replace numeric coordinates with meaningful boundaries. Names are written in brackets inside a track template.

.layout {
  display: grid;
  grid-template-columns:
    [sidebar-start] 18rem
    [sidebar-end content-start] minmax(0, 1fr)
    [content-end];
}

The middle boundary has two names because it is both the end of the sidebar and the start of content. Multiple names can describe different structural perspectives on the same physical line.

Place Items with Named Lines

Items reference line names in the same start/end syntax used by numbers.

.sidebar {
  grid-column: sidebar-start / sidebar-end;
}

.main {
  grid-column: content-start / content-end;
}

Named lines are valuable when several items align to shared boundaries or when numbers would obscure purpose. A small repeated card grid rarely needs this additional vocabulary.

Name Row Lines as Well

Rows can use named boundaries for headers, main content, and footers. The same line can mark the end of one region and beginning of another.

.page {
  grid-template-rows:
    [header-start] auto
    [header-end main-start] 1fr
    [main-end footer-start] auto
    [footer-end];
}

This provides precise line-based placement while retaining descriptive names. Use it when named areas are too coarse or when several items need different spans across the same architecture.

Repeated Named Lines

Names can appear inside repeat(), producing multiple occurrences. Advanced syntax can select a particular occurrence of a repeated name. This is useful in formal column systems where every repeated track has consistent start and end labels.

Most component layouts do not need repeated named lines. Numeric spans and auto-placement are easier to maintain until multiple independent items genuinely depend on those repeated boundaries.

What Is a Named Grid Area?

A named Grid area is a semantic rectangular region defined through grid-template-areas. Each quoted string represents one row, and each token represents a cell in that row.

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

The template has three area rows and two area columns. Repeating header across the first row makes that area span both columns; the footer follows the same pattern.

Assign Items to Named Areas

Each item chooses a region through grid-area. The item name must exactly match a token in the container template.

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

Named areas make page-level CSS visually descriptive. A reviewer can see the structure without converting every numeric line pair into a mental diagram.

Area Templates Must Match the Track Structure

Every quoted row in grid-template-areas must contain the same number of tokens. That count should correspond to the intended explicit columns. A two-token area row combined with a three-column template is inconsistent with a three-cell structural model.

Whitespace between tokens is flexible, but names are identifiers and spelling matters. Browser developer tools can display recognized areas and reveal a mismatch quickly.

Use Periods for Empty Cells

A period represents an unnamed cell. Multiple periods can create intentional blank regions while named areas occupy other cells.

.editorial {
  display: grid;
  grid-template-areas:
    ". title ."
    "sidebar main aside";
}

Empty structural cells should serve a real composition need. Often gap, alignment, or a narrower content track is simpler than maintaining empty area columns.

Named Areas Must Be Rectangular

Every repeated area name must form one rectangle. An L-shaped sequence is invalid because an item itself occupies a rectangular Grid area. If a design appears to need an L shape, divide it into separate items or revise the track structure.

This rule applies across all template rows. Repeating a name in disconnected sections also fails because the resulting region would not be contiguous.

Named Areas Generate Named Lines

A named area such as main implicitly creates main-start and main-end line names on each axis. Advanced layouts can combine area-based assignment with line-based alignment to those generated boundaries.

This connection shows that areas are built on top of the same line system rather than being a separate layout mechanism. Use the simpler area name for region placement and generated lines only when a more precise relationship is required.

grid-area Has Two Meanings

The most readable use assigns a named area, but grid-area is also a four-value placement shorthand. Its order is row start, column start, row end, column end.

.item {
  grid-area: 1 / 1 / 3 / 4;
}

This is equivalent to a row placement from 1 to 3 and a column placement from 1 to 4. The order is not the same as physical top, right, bottom, left shorthands, so explicit grid-row and grid-column rules may be clearer for teams unfamiliar with it.

Combine Auto-Placement with Exceptions

Manual placement should not be the default for every repeated item. Define tracks, allow ordinary children to auto-place, and add spans only to items that carry a distinct visual role.

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.card--featured {
  grid-column: span 2;
}

This strategy remains resilient when items are added, removed, filtered, or loaded dynamically. Numbering every item ties CSS to a specific result set.

Bento-Style Placement

An asymmetric dashboard can combine regular tracks with selected column and row spans. Grid is well suited to this visual pattern because all cards still align to shared boundaries.

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(10rem, auto);
  gap: 1rem;
}

.bento-featured {
  grid-column: span 2;
  grid-row: span 2;
}

Test item order, variable content, and narrow layouts. A four-column bento structure needs a simpler template when its minimum usable card widths no longer fit.

Manual Placement Can Create Implicit Tracks

If an explicit grid has three columns and an item starts at column line 5, the browser creates implicit structure to satisfy the placement. The resulting blank tracks and unexpected width may look like a browser error but follow the declared coordinate.

Inspect explicit and implicit lines in DevTools when a placed item appears far from the expected region. Correct the endpoint or intentionally define grid-auto-columns if extending the grid is part of the design.

Responsive Named Areas

The same semantic items can occupy different area templates at different component or viewport widths. A mobile layout can stack every region; a desktop template can place sidebar and main content side by side.

.page {
  display: grid;
  grid-template-areas:
    "header"
    "sidebar"
    "main"
    "footer";
}

@media (min-width: 50rem) {
  .page {
    grid-template-columns: 16rem minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }
}

Keep the DOM in a logical reading and interaction sequence. The visual template may rearrange regions, but it does not rewrite screen-reader or default keyboard order.

A Complete Page Shell

A production shell combines rows, columns, dimensions, and areas. The main track uses a zero minimum to reduce content-driven overflow.

.page {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

The area map describes placement, while track definitions describe size. Keeping those responsibilities separate makes responsive revisions easier.

Forms and Full-Width Messages

A two-column form can use auto-placement for fields and a line span for a validation summary or explanatory message.

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-message {
  grid-column: 1 / -1;
}

No extra row wrapper is needed. Preserve semantic label, control, help, and error associations; placement does not create those relationships.

Line Numbers, Named Lines, or Areas?

These techniques can be combined. Use auto-placement for regular cards, a span for a featured card, and named areas for the surrounding page shell. Choose the clearest vocabulary at each layout level.

Overlap Items in the Same Area

Grid items may occupy the same lines or named area. This can create a hero image with content layered over it without removing both elements from Grid layout.

.hero {
  display: grid;
}

.hero-image,
.hero-content {
  grid-area: 1 / 1;
}

.hero-content {
  z-index: 1;
}

Overlapping items still follow stacking and painting rules. Ensure text contrast, pointer behavior, focus visibility, and content growth remain usable. Use an overlay because layers are the design, not as a shortcut around normal placement.

Line Numbering and Writing Direction

Positive column line numbers begin at the inline-start edge of the Grid container. In a typical left-to-right horizontal document, that appears on the left. In a right-to-left document, inline start appears on the right, so the visual location of column line 1 changes. Row line numbering similarly follows the block-start side defined by the writing mode.

This behavior is useful because a logical layout can adapt to language direction, but it can surprise code written with physical assumptions. A declaration such as grid-column: 1 / 2 means the first logical column, not permanently the leftmost visual column. If an element must stay associated with content start, that adaptation is correct. If it has a different semantic position, a named area or named boundary may communicate the requirement better.

Test right-to-left direction rather than only reviewing the CSS. Text expansion, directional icons, physical margins, and alignment values may introduce issues even when Grid lines reverse correctly. Logical padding and margin properties help the surrounding spacing follow the same model.

Definite Placement and Auto-Placement

A Grid item can be definite on both axes, definite on one axis, or automatic on both. An item with explicit row and column start/end lines has a complete coordinate. An item with only a column span still needs the auto-placement algorithm to find its row. This distinction explains why two items with similar declarations can be resolved at different stages.

Definite items establish occupied areas before many automatic items are placed. Later content then searches for available cells around them. A large featured item near the beginning can influence the position of every following card. Changing its span at a breakpoint can therefore reshape the entire remaining sequence without changing any sibling rules.

Use that interaction deliberately. If later cards must preserve strict business positions, auto-placement may be the wrong contract. If they are an unordered visual collection, allowing the browser to fill the remaining cells keeps CSS smaller and responds better to changing item counts.

Placement Conflicts and Intentional Overlap

Grid does not guarantee that two explicitly placed items receive separate regions. If their line coordinates intersect, they can overlap. Sometimes this is the intended hero-overlay pattern; in other cases it is a placement defect caused by reused coordinates or a responsive template that changed underneath fixed item rules.

When overlap is intentional, define the stacking relationship, content contrast, pointer behavior, and minimum space explicitly. When it is not intentional, do not solve it by increasing z-index. Compare both items' resolved line positions and inspect whether one created implicit tracks or retained a desktop coordinate in a narrow template.

Content still matters inside an overlap. A caption that grows to several lines may cover an important part of an image or another control. Test long translations, zoom, and high-contrast modes, and provide a nonoverlapping responsive treatment when the available area becomes too small.

Maintain Area Templates as a Contract

A named-area template is easiest to maintain when names correspond to stable semantic regions rather than temporary visual descriptions. Names such as main, navigation, and summary survive many design changes. Names such as left-box or blue-panel become inaccurate when direction or styling changes.

Treat each responsive area map as a complete contract. Every area used by a required item should appear in each relevant template, and every quoted row must have the same token count. When an optional region is removed from the DOM, confirm that its empty area does not leave an unintended hole. Sometimes changing the template class based on component state is clearer than keeping a permanent vacant region.

Keep track sizes beside the corresponding area map so their relationship is easy to review. A desktop map with two tokens per row needs a two-column sizing strategy; a mobile map with one token per row should not inherit a stale two-column template unless that behavior is intentional.

Worked Editorial Layout

An editorial page may need a readable article column, a metadata rail, and selected full-width media. Grid lines can provide precise width control while source order remains article-first. The surrounding layout establishes named boundaries, and individual media can span a wider region when required.

.article-layout {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [meta-start] minmax(10rem, 14rem)
    [meta-end content-start] minmax(0, 65ch)
    [content-end] minmax(1rem, 1fr)
    [full-end];
  gap: 1.5rem;
}

.article-copy {
  grid-column: content-start / content-end;
}

.article-meta {
  grid-column: meta-start / meta-end;
}

.article-media {
  grid-column: meta-start / content-end;
}

At narrow widths, the template can become one column and every region can return to auto placement. The CSS does not require moving content in the DOM. This example shows why named lines are useful when areas would be too coarse: several item types share some boundaries but not one identical named rectangle.

Responsive Placement Without Brittle Coordinates

Numeric coordinates are local to a particular template. A rule that begins at line 3 assumes that line exists and represents the same boundary at every responsive state. When templates change substantially, reset or replace item placement within the same breakpoint that changes the tracks.

Named areas often make this reset automatic because items keep the same area name while the map changes. Named lines can also be redefined consistently across templates. For repeated cards, removing custom line placement and returning to auto-placement may be the cleanest narrow-screen behavior.

Test intermediate widths, not only the endpoints shown in a design. Content may cause a structural breakpoint earlier than expected, and a multi-track span can become unusable before the container reaches a common device width. Container queries are appropriate when a reusable component should respond to its own inline size rather than the page viewport.

Accessibility and Source Order

Grid placement changes visual position without changing semantic or keyboard order. A visually reordered sequence of links or buttons can cause focus to jump around the screen. Screen-reader users may encounter a different sequence from the layout being discussed visually.

Write the DOM in the logical reading and task order, then use Grid to arrange that structure. Named areas should map semantic regions, not justify arbitrary source ordering. Test every responsive template by keyboard because a mobile stack can expose ordering assumptions hidden by a desktop layout.

Common Mistakes and Corrections

Debugging Grid Lines and Areas

Enable the browser's Grid overlay to display line numbers, track boundaries, gaps, named lines, and area labels. First confirm how many explicit rows and columns exist. Then verify that each start and end value refers to a line, and remember that the end boundary is outside the occupied tracks.

If a named item is absent or misplaced, compare spelling and validate that every template row has the same number of cells. If the layout expands unexpectedly, look for placement beyond the explicit grid. If later items leave holes, inspect spans and auto-flow behavior.

1. Count explicit tracks and boundary lines
2. Display line numbers and named areas
3. Verify start and end endpoints
4. Confirm span counts occupied tracks
5. Check area spelling and rectangular shape
6. Inspect auto-placement and implicit tracks
7. Test DOM, visual, and keyboard order together

Production Testing

Test line placement after every responsive template change. A numeric endpoint valid in a four-column grid may create implicit structure in a one-column template. Named areas reduce some coupling, but every breakpoint still needs a complete valid area map and compatible track definition.

Test long text, translated labels, zoom, right-to-left direction, missing regions, optional widgets, and different item counts. A layout may be structurally valid but unusable when a sidebar grows, a featured card appears late in the sequence, or an overlay covers interactive content.

Use screenshots as one check, not the only check. Navigate by keyboard, inspect the accessibility tree where appropriate, and verify that reading order matches meaning. Grid can provide sophisticated visuals while retaining simple, logical source structure.

Grid Terminology Summary

Common Interview Questions

What is a Grid line? It is a boundary separating row or column tracks.

If a grid has three columns, how many column lines exist? Four boundary lines.

What does grid-column: 1 / 3 mean? The item starts at line 1 and ends at line 3, spanning two column tracks.

What does grid-column: 1 / -1 do? It spans from the first to the final explicit column line.

What does span 2 mean? The item occupies two tracks from its resolved starting position.

What is a Grid area? It is a rectangular region formed by one or more Grid cells.

What does grid-template-areas do? It defines named regions through a string-based visual map.

Can a named area be L-shaped? No. Every named area must form one rectangle.

Can Grid items overlap? Yes. Multiple items can occupy the same lines or area and follow stacking rules.

Practical Review Checklist

• Think in boundary lines rather than cell numbers.
• Remember that N tracks produce N plus one lines.
• Use 1 / -1 for complete explicit-grid spans.
• Use span when only the occupied track count matters.
• Let auto-placement handle ordinary repeated items.
• Use named areas for readable stable page regions.
• Use named lines for shared precise boundaries.
• Keep area maps rectangular and dimensionally consistent.
• Check whether manual placement creates implicit tracks.
• Keep DOM, reading, visual, and focus order coherent.
• Test every responsive area template independently.
• Use Grid overlays to inspect actual lines and areas.

Key Takeaway

Grid lines create the boundaries around tracks. Row and column tracks intersect to form cells, and rectangular groups of cells form areas. Line placement gives precise coordinates, spans express how many tracks an item occupies, named lines describe shared boundaries, and named areas turn stable page regions into a readable visual template.

Use auto-placement for regular content and add manual placement only where structure or emphasis requires it. Choose numeric lines for concise local spans, named lines for precise architecture, and named areas for semantic page regions. Keep source order logical, verify responsive templates, and inspect the actual Grid overlay whenever the visible result differs from the intended boundaries.