CODEWITHSUNDEEP
csscss-grid
ILikeThePoopSmith
ILikeThePoopSmith

Reputation: 121

CSS Grids: Relation between grid gaps(gutters) and grid lines

I'm new to CSS, and I'm trying to understand the anatomy/structure of CSS grids. So far, I understand that grids have rows and columns, that they are comprised of cells, and that there are gaps between cells called gutters. If I'm not mistaken, a grid track is the region defined by the space between grid lines. So the track ends up being the horizontal or vertical portion of a cell.

I'm a little bit confused about grid lines however. My intuition is that grid lines and grid gaps are in some sense the same thing. I guess they are different in that gaps have a notion of thickness, whereas lines are just one-dimensional separations. Is that correct? But, they both denote the area between cells, right?

I may be very confused and wrong. Please help me understand the difference between grid lines and grid gaps, and how they relate to each other. A diagram would be helpful.

Upvotes: 1

Views: 503

Answers (1)

Temani Afif
Temani Afif

Reputation: 272779

My intuition is that grid lines and grid gaps are in some sense the same thing.

You are almost good here. The only difference is that we don't have gaps at the edges of the grid but we do have grid lines there

From the specification:

Grid lines are the horizontal and vertical dividing lines of the grid. A grid line exists on either side of a column or row.

and

The row-gap and column-gap properties (and their gap shorthand), when specified on a grid container, define the gutters between grid rows and grid columns.

The effect of these properties is as though the affected grid lines acquired thickness: the grid track between two grid lines is the space between the gutters that represent them. For the purpose of track sizing, each gutter is treated as an extra, empty, fixed-size track of the specified size, which is spanned by any grid items that span across its corresponding grid line.

and

Gutters only appear between tracks of the implicit grid; there is no gutter before the first track or after the last track.

A figure from the same specification:

enter image description here

If the above grid is having gaps it will increase the thickness of "line 2" between both columns and "line 2"/"line 3" between rows. In other words, you will always have N lines, (N - 1) columns and (N - 2) gaps.

Upvotes: 3

Related Questions