CSS Academy · Lesson

Named Lines and Named Grid Areas

Name grid lines and areas for more readable and maintainable grid placement.

Named Lines and Named Grid Areas is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Naming Grid Lines

Grid lines can be given names in square brackets within grid-template-columns and grid-template-rows. Named lines make placement code more readable than raw numbers.

.layout {
  display: grid;
  grid-template-columns:
    [start sidebar-start] 200px
    [sidebar-end main-start] 1fr
    [main-end end];
}

Placing Items with Named Lines

Use named lines in grid-column and grid-row for readable placement:

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

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

Line Names with -start and -end

When named areas are defined with grid-template-areas, CSS automatically creates named lines with -start and -end suffixes that you can reference.

.layout {
  grid-template-areas: "sidebar main";
}

/* These line names are auto-generated: */
/* sidebar-start, sidebar-end, main-start, main-end */

Repeating Named Lines

When using repeat(), you can include names inside the repeated pattern. Lines get numbered suffixes to disambiguate.

.grid {
  grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
  /* Lines: col-start 1, col-end 1, col-start 2, col-end 2... */
}

Spanning Named Lines

Use named lines with span to span a specific number of named tracks:

.header {
  grid-column: col-start 1 / col-end 3;
  /* From first col-start to third col-end */
}

Named Areas Recap

Named areas (via grid-template-areas) are the most readable approach for positioning items:

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

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

Named Lines for Complex Layouts

Named lines shine for complex editorial layouts with multiple spanning elements:

.magazine {
  grid-template-columns:
    [edge-start] 1fr
    [content-start] 700px
    [content-end] 1fr
    [edge-end];
}

.full-bleed { grid-column: edge-start / edge-end; }
.article    { grid-column: content-start / content-end; }

Combining Names and Numbers

Named lines and line numbers can be mixed freely in the same grid:

.item {
  grid-column: content-start / 4;
  grid-row: 2 / main-end;
}

Multiple Names on One Line

A single line can have multiple names — useful when a line serves as both the end of one area and the start of another:

.grid {
  grid-template-columns:
    [sidebar-start] 200px
    [sidebar-end content-start] 1fr
    [content-end];
}

Implicit Named Lines from Areas

If you define a named area called "main", the lines main-start (column and row) and main-end are automatically created, letting you use them for overlapping items.

Debugging Named Lines in DevTools

Chrome and Firefox DevTools can display named grid lines as labels on the overlay. Enable line labels in the Layout panel to verify names are correct.

Quick Check

When you define a named grid area "sidebar" in grid-template-areas, which line names are automatically created?

Recap

Name grid lines in square brackets inside track definitions for readable placement. Named areas automatically generate -start and -end line names. One line can have multiple names. Named lines combine with span and numbers freely. Use DevTools to visualize named lines as overlays.

Frequently asked questions

Is the “Named Lines and Named Grid Areas” lesson free?

Yes — the full text of “Named Lines and Named Grid Areas” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Named Lines and Named Grid Areas”?

Name grid lines and areas for more readable and maintainable grid placement. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Named Lines and Named Grid Areas” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy