Why is positioning an item on the css grid done by grid-line and not row/column number?

Question

I gave a tech presentation at my company about the new CSS grid spec and my manager asked me a very interesting question for which I didn't have a simple answer. Why, when positioning an element within a grid, are positions referred to by what grid-lines they are between instead of having some inherent way of identifying the columns and rows? I know about grid-template-areas, but that is still something you have to define yourself.

Essentially, my question is this: Why are the numbers in the following example referring to grid line numbers instead of grid column numbers?

grid-column: 1/4;

Answer 1

It's a good question. Here's a simple representation of a grid (taken from https://scotch.io/tutorials/getting-started-with-css-grid-layout):

As we know, a column spanning the middle and last columns can be referenced by start and end line numbers:

grid-column: 2 / 4;

But there's really no intrinsic reason why the spec couldn't have allowed us to specify column numbers instead:

 grid-column: 2 / 3;

The following methods would still have worked, exactly as they do now:

 grid-column: 2 / -1;

 grid-column: 2 / span 2;

So those alternate methods are not an argument for line-based referencing. The difference between numbering grid lines vs grid tracks (rows and columns) is really only apparent when you try to reference that last row or column from your starting point—a classic off-by-one error!

So why did the W3C choose lines over tracks? Did they toss a coin?

The answer can be found here, in The Story of CSS Grid, from Its Creators, a 2017 article on A List Apart.

Peter Linss, then Co-Chair of the CSS Working Group, also suggested that they incorporate the concept of grid lines in the spec (instead of only talking about tracks). He believed including this familiar graphic design concept would make the spec more accessible to designers.

“When we were thinking initially about CSS Grid, we were thinking about it in a very app-centric model,” recalled Microsoft’s Rossen Atanassov, who is also an Editor on the spec. “But grid is nothing new. I mean, grid’s been here for a very long time. And that traditional type of grid has always been based on lines. And we’d been kind of ignoring the lines. When we realized that we could marry the two implementations—the app side and the typography side of the Grid—this for me, personally, was one of those aha moments that really inspired me to continue working on Grid.”

So there you have it! It was all about making it easy for those old-time graphic designers, who as we all know, aren't smart enough to adapt to a slightly new concept. ;-)

As an old-time graphic designer myself, I actually find this a bit odd, as I have never thought about a layout grid in terms of line numbers, and if you'd asked me which was the more intuitive approach, I'd have probably sided with your boss. And as a programmer, I find the choice of one-based addressing (instead of zero-based) to refer to the grid lines as, well a bit odd. But hey, it's a minor adjustment to one's way of thinking, and one I'm happy to make to enjoy all the layout goodness that CSS grid brings us.

Answer 2

The CSS Grid specification defines multiple ways to align and position items in a grid container. They are described in the section named Placing Grid Items.

With regard to your question:

Why are the numbers in the following example referring to grid line numbers instead of grid column numbers?

grid-column: 1 / 4;

Because that particular method of placing grid items is call "Line-based Placement", which focuses on the boundary lines of a grid area.

Line-based Placement

The grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start, block-start, inline-end, and block-end edges of its grid area.

("inline-start" is the side where text begins. It's the left side in LTR. "block-start" is the top in horizontal writing mode. "-end" refers to the opposite side. source)

If you wanted your rule to count columns / rows instead of lines, then use the span keyword.

Whereas:

grid-column: 1 / 4

creates a grid area starting at column line 1 and ending at column line 4 (i.e., columns 1, 2 & 3)...

grid-column: 1 / span 3

does the same thing, but counts the columns.

There are other methods available. See the descriptions here:

• https://www.w3.org/TR/css3-grid-layout/#placement

Here's a demo of the two methods described above:

article {
  display: grid;
  grid-template-columns: repeat(12, 75px);
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

section:nth-child(1) {
  grid-column: 1 / 4;
  grid-row: 1;
}

section:nth-child(2) {
  grid-column: 1 / span 3;
  grid-row: 2;
}

/* non-essential demo styles */
section {
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

<article>
  <section><code>grid-column: 1 / 4<br>counts lines</code></section>
  <section><code>grid-column: 1 / span 3<br>counts columns</code></section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
</article>

Answer 3

Grid lines define a clear start and end point for placing grid items and defining grid areas.

Saying that a grid item should start at grid line 1 and end at grid line 4 makes it clear that the item should be contained within the area between those lines. Saying that a grid item should start at column 1 and end at column 4 is a little less clear: Should the item occupy column 4 or not? If it doesn't, then it would be possible to place another item at column 4 with grid-column: 4 following the same semantics. Otherwise, placing an item there would cause it to overlap with the first item.

This is particularly important for auto-placement, which can result in new rows and columns being created if there is no room in the explicit grid to place additional items. Section 8.5 of the spec contains all the details.