CSS网格:网格间隙(装订线)和网格线之间的关系 [英] CSS Grids: Relation between grid gaps(gutters) and grid lines

问题描述

我是CSS的新手，我正试图了解CSS网格的解剖结构/结构.到目前为止，我了解到网格具有行和列，它们由单元格组成，并且单元格之间存在间隙，称为装订线.如果我没记错的话，网格线就是网格线之间的空间所定义的区域.因此，轨道最终成为单元的水平或垂直部分.

但是，我对网格线有些困惑.我的直觉是，网格线和网格间隙在某种意义上是同一件事.我猜它们是不同的，因为间隙具有厚度的概念，而线只是一维的分隔.那是对的吗?但是，它们都表示单元格之间的区域，对吧?

我可能非常困惑和错误.请帮助我了解网格线和网格间隙之间的区别，以及它们之间的关系.图表会有所帮助.

解决方案

我的直觉是，网格线和网格间隙在某种意义上是同一件事.

您在这里几乎很好.唯一的区别是我们在网格的边缘没有缝隙，但是那里确实有网格线

来自

如果上面的栅格具有间隙，它将增加线2"的厚度.在两列和第2行"/第3行"之间行之间.换句话说，您将始终具有N行，(N-1)列和(N-2)间距.

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.

解决方案

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:

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.

这篇关于CSS网格:网格间隙(装订线)和网格线之间的关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！