Named lines

Grid lines can be named so positioning is easier to read than with numbers and does not depend on the number of columns.

Names are written in square brackets inside grid-template-columns or grid-template-rows.
A single line can have several names, separated by spaces.
If you use the -start and -end suffixes, the browser creates an implicit area with that name, usable in grid-area.

Example

The grid defines the sidebar, main and full lines. Select a grid-column value to place the element with the item class using those names.

Select grid-column:

sidebar-start / sidebar-endmain-start / main-endfull-start / full-end

ResultLiveContainer width100%

html

<div class="container">
  <div class="child item">item</div>
  <div class="child">1</div>
  <div class="child">2</div>
</div>

<div class="container">
  <div class="child item">item</div>
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns:
    [full-start sidebar-start] 8rem
    [sidebar-end main-start] 1fr
    [main-end full-end];
  padding: 0.5rem;
}

.item {
  background: #d9d2f5;
  grid-column: main-start / main-end;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns:
    [full-start sidebar-start] 8rem
    [sidebar-end main-start] 1fr
    [main-end full-end];
  padding: 0.5rem;
}

.item {
  background: #d9d2f5;
  grid-column: main-start / main-end;
}

.child {
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.