Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

css-grid

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;
like image 314
soultrust Avatar asked Nov 07 '22 13:11

soultrust


1 Answers

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.

like image 152
BoltClock Avatar answered Dec 01 '22 00:12

BoltClock