CSS Grid Layout: Named Lines

The default way to place grid items onto the grid with CSS Grid Layout is by specifying starting and ending grid line numbers. This can quickly become complicated, especially with more complex grids. Named lines offer an alternative to placing items and allow you to name important lines and then place grid items using these named lines.

The demos should still work on non-supporting browsers, thanks to this Grid polyfill.

First, here’s an example with the items placed using line numbers:

.container {
    display: grid;
    grid-gap: 4px;

    grid-template-columns: 2fr 1fr 15%;
    grid-template-rows: 50px 150px 50px;
  }

  .header {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .content {
    grid-column: 1 / 2;
    grid-row: 2;
  }
  .content-side {
    grid-column: 2;
    grid-row: 2;
  }
  .sidebar {
    grid-column: 3;
    grid-row: 1 / 4;
  }
  .footer {
    grid-column: 1 / 3;
    grid-row: 3;
  }

Here’s the resulting grid:

Header
Content
Content Side
Sidebar
Footer

Now here’s the same example, but notice how we define named lines in square brackets as part of the grid-template-columns and grid-template-rows definitions. We define these named lines between the track sizes. We then use these line names on the grid items for the values of grid-column and grid-row:

.container {
  display: grid;
  grid-gap: 4px;

  grid-template-columns:
    [content-start] 2fr
    [content-end content-side-start] 1fr
    [content-side-end side-start] 15% [side-end];

  grid-template-rows:
    [header-start] 50px
    [header-end content-start] 150px
    [content-end footer-start] 50px [footer-end];
}

.header {
  grid-column: content-start / content-side-end;
  grid-row: header-start / header-end;
}
.content {
  grid-column: content-start / content-end;
  grid-row: content-start / content-end;
}
.content-side {
  grid-column: content-side-start / content-side-end;
  grid-row: content-start / content-end;
}
.sidebar {
  grid-column: side-start / side-end;
  grid-row: header-start / footer-end;
}
.footer {
  grid-column: content-start / content-side-end;
  grid-row: footer-start / footer-end;
}

Notice how one line can have multiple names by defining all the names in the same square brackets:

  • [content-end content-side-start]

You can name only the lines that are significant for your purposes, and then you can always use a mixture of line numbers and named lines when placing grid items.

In the example with named lines, we decided to explicitly define the starting and ending columns and rows, but by default an item will span one column or row, so the property values can be shorter for the same result:

.header {
  grid-column: content-start / content-side-end;
  grid-row: header-start;
}
.content {
  grid-column: content-start;
  grid-row: content-start;
}
.content-side {
  grid-column: content-side-start;
  grid-row: content-start;
}
.sidebar {
  grid-column: side-start;
  grid-row: header-start / footer-end;
}
.footer {
  grid-column: content-start / content-side-end;
  grid-row: footer-start;
}
  Tweet It
✖ Clear

🕵 Search Results

🔎 Searching...