7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. CSS Grid Layout

Quick Tip: Name Your CSS Grid Lines, Just in Case

Scroll to top
Read Time: 3 mins
This post is part of a series called Understanding the CSS Grid Layout Module.
Understanding the CSS Grid “Auto-Placement Algorithm”
How to Use Implicit Track Sizing on Your CSS Grid

In any CSS Grid each line has an index number which we can reference to place grid items. However, we can also name each of these grid lines, making it easier to work with and maintain our grid layouts. Let’s take a look!

Grid is Coming

The most common response to any Grid tutorial is “but when can I use this?” and it’s a fair question. The fact is: Grid is coming, and it will be here soon.

“CSS Grid is going to become supported-by-default in Chrome and Firefox in March of 2017.” – Eric Meyer

If you haven’t taken a look at it yet, now’s the time!

Grid Line Numbers

When we declare a grid, each line is given an index number: 

Note: Unless the layout is set with direction: rtl;, these numbers begin at the top left of the grid, working their way to the bottom right. 

We can reference these numbers to place grid items:

In this example our .item element is positioned starting on column line 2, and row line 3:

Explicit Grid Line Names

With more complex grids, you can imagine that referencing everything by numbers might get a bit confusing. For this reason, the Grid module allows us to explicitly name our lines when we declare our grid columns and rows.

Let’s use an example like the ones we’ve used throughout this series. Here’s our basic 3×3 grid declaration:

Now we can wrap our column and row values with line names (whatever the heck we want), using square brackets:

We can now position items with names, instead of numbers:

Some pointers:

  • These names can be tailored to your own descriptive needs, so think logically about what will help you recognize and remember areas of the grid.
  • The original line numbers remain in operation, so you can still use them.
  • You can declare multiple names for one line, for example: [main-end footer-start row-5] etc.
  • Even if you name your grid lines, you’re not obliged to use them, so it’s a good “just in case” habit to get into.

Implicit Grid Line Names

When we deliberately do things, like naming grid lines, that’s said to be explicit. When something is implied, but not directly stated, that’s referred to as being implicit. We’ve covered explicitly naming grid lines, but there are also circumstances where lines are given names implicitly.

You may recall from a previous tutorial that it’s possible to define grid areas.

We might define four grid areas like this:

This gives us the following:

Naming a grid area header automatically assigns names to its four boundary lines too. The row lines around it become header-start and header-end, and likewise the two column lines also become header-start and header-end. The same applies to the other areas, which are given line names main-start, main-end, sidebar-start and so on.

Note: Looking at things in reverse, explicitly adding named lines in the same format (header-start and header-end) will create a named grid area of header

We can use these line names just like we have previously, to position items. And again, they exist in addition to any names you define yourself, and the original line index numbers.

End of the Line

That’s it for this quick tip! Remember: get into the habit of naming your lines and areas for easier grid management and maintenance. 

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.