How do grid lines work in CSS grid?
Hello guys, sorry to disturb you all; can someone explain how the CSS grid lines work please; the thing I'm not understanding is why the grid lines (represented by the black line) doesn't start on the edge of the rows or columns but before the rows or columns, like in the gap, I'm very confused about that. It is like if our grid-container has a padding and the black line is drawn in this padding.
Second is why we always have 1 more row grid line or 1 more column grid line that actual number of rows and columns.
4 Replies
I don't think the first part is true, the grid lines are what separates the cells. If there is a
gap: set, sure, the lines might not start where the content starts, but that's because you need a singular line to separate two areas from each other, and that has to start somewhere. Regardless, you use them to position elements into grid cells, and the exact location of them isn't relevant. The element you position will go in the grid cell defined by the lines you specify, and then use any gap or padding or whatever to determine it's final position
you have one more line than the number of cells because you can also use the lines to determine the end position of an element in a grid. You can say run from line 2 to line 4, and that will have the item span the cell between 2 and 3, and the cell between 3 and 4
if you only had three lines in a three column grid, you wouldn't be able to do that
To clarify this: I think it's just a visual representation that's failing to convey the way it works perfectly, because there is no perfect way to represent it. The line exists only to separate two cells, and its actual physical position if there's a gap defined isn't relevant at all. Sticking it in the middle of the gap just makes it a little more visible.
Basically, Line 2 in your example is both where grid cell 1 ends and where grid cell 2 begins, so it's equally valid to put it on the left of the gap, or the right of the gap, or right in the middle. Or even to have two Line 2's, one on each side. The distinction is again meaningless though, you can't say "Line 2 + 2px" or whatever, so its exact location doesn't matteryepp I see, it's just have to start somewhere and end somewhere like you said earlier
What Jochem says, and from chrome developer tools & https://jsfiddle.net/oztcb8fg/1/ (including
gap)
yeah I see, thanks !