前端入门：CSS Grid网格基础知识，创建容器及元素定位介绍

上篇内容对css Grid的基本理念和操作方式进行了概述，本篇文章将探讨在构建网格容器过程中会出现哪些情况，并且讲解如何通过行和列属性在网格容器中对元素进行精确定位。

在本文中，将介绍：

创建一个网格容器

grid与flex同属于display属性的可选值之一，其功能是向浏览器指示元素应被呈现为块级单元。设定display属性为grid后，浏览器将生成一个网格布局上下文，此时其直接子元素将实际成为网格单元，而非传统的块级或行内元素。

我们将采用display:grid属性来构建一个网格布局的容器。

图1

您可以选择采用display: inline-grid属性来构建一个行内网格容器，这样的容器允许其子元素像块级网格那样排列，但与块级网格不同的是，行内网格容器的宽度并非固定，而是根据内容宽度自动调整。与之相对，块级网格容器的宽度通常是100%。以下是一个展示该特性的示例图。

图2

仔细看行内网格容器后面的文本和其显示在一行了。

在默认状态下，页面中无法辨识其为网格，这主要是因为尚未为其设定网格轨道。

网格轨道

为了使该网格容器呈现出网格的形态，我们可通过grid-template-columns属性来设定列，通过grid-template-rows属性来设定行。具体操作是，利用由空格分隔的数值列表来定义网格的列宽和行高，这些数值即代表各个轨道的宽度。

在设置轨道的列和行时，可以采用诸如像素(px)、点(pt)、根单位(rem)以及百分比等固定长度单位，同时也可运用min-content和max-content、fr弹性单位、repeat()函数来重复构建行或列，还有auto-fill、minmax()函数、full-start、content-start、content-end、full-end等工具。

使用固定长度单位

如下示例：

.container {
列模板宽度分别为40像素、50像素、自适应宽度、50像素和40像素。
设置行模板的高度分别为25%、100像素以及自适应。
}

设定了一个由三行五列组成的网格布局，每个单元格的宽度和高度均为固定的像素值，而auto参数代表自动调整大小，即会依据内容自身的尺寸进行计算，具体可参照下方的示例图。

在默认设置中，系统会自动为网格线进行编号，编号方向遵循从左至右或从上至下的顺序，正数表示正向编号，而反方向则用负数表示。

网格线命名

除此之外你也可以给网格线命名，如下示例：

.container {
grid-template-columns属性定义了列的布局，其中包含了以下元素：首先是一个标记为"first"的40像素宽的列，接着是一个标记为"line2"的50像素宽的列，然后是一个自动宽度（auto）的列，紧接着是一个标记为"col4-start"的50像素宽的列，之后是一个标记为"five"的40像素宽的列，最后是一个标记为"end"的列。
grid-template-rows属性设置为：从row1-start开始，占据25%的高度，接着是100px的高度，然后是第三行，自动填充，最后是最后一行。
}

网格线命名

请注意，同样可能存在多个名称。比如，此处第二行就包含两个名称：row1-end 和 row2-start。

.container {
grid-template-rows属性定义了行模板，具体包括：从row1-start开始，占据25%的高度，接着是row1-end和row2-start，它们之间同样占据25%的高度，最后是row2-end。
}

给行或列命名有什么作用？

此处暂未展开说明，后续篇章将独立阐述如何通过grid-column-start与grid-column-end属性引用网格线的标识来精确定位页面元素。

使用 repeat()函数

若您设定的行列值均相同，则可通过运用 repeat() 符号来简化配置过程。

.container {
设置网格列模板为重复三次，每列宽度为20像素，并指定列的起始位置。
}

相当于

.container {
grid-template-columns属性设置为：20像素，接着是col-start属性，再是20像素，然后是col-start属性，最后是20像素，紧接着是col-start属性。
}

上述代码利用repeat指令成功设置了三列，每列的宽度均为20像素，且均命名为col-start。在repeat函数内，每列的宽度设定不仅限于固定单位或百分比，还支持使用fr单位、特定关键词、函数等多样化方式，具体内容将在后续内容中进行详细阐述，敬请继续阅读。

如果多行有相同的名称，则可以通过行名和行数来引用它们。

.item {
grid-column起始位置设置为第2列；
}

repeat 函数第二个参数可以设置多个行或列，如下：

定义网格列模板时，采用重复模式，连续三次，每次分别指定100像素和200像素两个宽度值。

若对同一宽度分别为100像素和200像素的列进行重复设定，最终将形成由六个这样的列组成的网格布局。

使用 fr 单位

在先前的关于网格基础知识的介绍中，我们曾提及fr单位这一概念，该单位是专为网格系统设计的，与flex布局中的flex-grow功能相似。

fr 单位让您有权调整轨道尺寸，使其仅占据网格容器中极小的一部分空间。以实例来说明，如此操作后，每个项目将占据网格容器宽度的一个三分之一。

.container {
该属性指定了网格的列配置，每列均等分配，分为三个等份。
}

如图所示，将图形分为三列，但仅前两行等分，后两行的尺寸不计入分配空间，具体可参照以下示例：

前三个格子的高度保持一致，一旦其中任意一个格子的高度发生变化，其余格子的高度也会随之调整至相同水平。观察最后两个格子，它们的高度并未受到前述变化的影响。这表明，采用fr单位的行或列的总和恰好等于网格容器所拥有的可用空间。

如果如下设置的话，第二列的宽度是其它列的2倍。：

列模板宽度设置为：各占1份、2份、1份。

使用关键字

在调整行列尺寸的过程中，您可以根据个人喜好选择任何您熟悉的长度单位，诸如px、rem或%，同时，您还可以运用特定的关键词来进行设置。

如下所示：

.container {
  display:grid;
  width:500px;
设置网格列模板为：宽度为50像素，最小内容宽度，以及自动宽度。
设置网格行模板为：每行等分，各占1份。
 }

第二列的宽度确保与内容的最小尺寸相匹配，而第三列则设置为auto，它将自动填充剩余的所有可用空间。

如果把第三列设置成 min-content，如下示例：

设置网格列模板为：宽度分别为50像素、最小内容宽度和最小内容宽度。

当设置第三列max-content 时，如下示例：

观察上方三幅图像，我们可以明显辨识出auto、min-content与max-content三者之间的差异。auto属性等同于剩余空间，并且会完全填满它；而min-content和max-content则不会填满剩余空间，它们分别根据内容的实际最小值和最大值来确定所占空间。这几个属性的定义需要通过大量练习来掌握，亲自尝试各种搭配，观察其效果。

minmax() 函数

minmax()函数能够生成一个表示长度区间的数值，这个长度值必然位于所设定的区间内。该函数需要两个参数，一个代表区间的最小长度，另一个则是区间的最大长度。

这种做法与相对单位结合后特别实用。例如，您可能期望某列数据能够缩小到特定的最小尺寸。以下是一个具体示例：

.container {
  display:grid;
设置列模板为：1个等分、最小100像素最大1个等分、3个等分。
  grid-template-rows: 1fr 1fr 1fr;
 }

如图所示，调整页面尺寸后，第二列的宽度范围在100px以上且不超1fr。这一特性与媒体查询相似，适用于构建响应式设计。

repeat() 函数和关键字

repeat函数和关键字可以一块使用，如下代码：

/* easier: */
grid-template-columns:
  repeat(8, 1fr);
/* especially when: */
grid-template-columns:
  repeat(8, minmax(10px, 1fr));

如下示例：

.grid-container {
  display:grid;
设置栅格列模板为重复5次，每列的最小宽度为60像素，最大宽度为可用空间的比例。
  grid-template-rows: 1fr 1fr 1fr;
 }

如上图中，定义了5列，每列宽度最小60px，最大1fr。

在调用repeat函数时，第一个参数不仅可以是数字，还可以选择使用auto-fill或auto-fit这两个关键字。

单元格的尺寸通常是固定的，而容器本身的尺寸却可能有所变动。若想确保每行（或每列）能够包含尽可能多的单元格，此时便可以运用auto-fill或auto-fit这两个关键字来实现自动调整。

如下示例：

.grid-container {
  display: grid;
  grid-gap: 12px 10px;
网格模板列设置为自动填充，每列宽度为100像素。
 }

该代码设定了每列的宽度为100像素，并会自动扩展填充，直至容器空间不足以容纳更多列。

auto-fill或auto-fit 区别

前者需额外创造空间以填补过剩的空隙，相对地，后者则无需进行此类操作。例如：

auto-fill

auto-fit

auto-fit功能会将空白列或空白行进行合并，而auto-fill则不具备这一功能。

这两个关键词经常与minmax函数配合使用，以此达到实现自适应布局的效果，从而无需依赖媒体查询。在此方面，涉及的内容相当丰富，稍后我会专门进行阐述。

设置网格列模板为自动适应，每列最小宽度为250像素，最大宽度为可用空间的比例。

隐式网格轨道

运用网格布局时，若轨道行列缺乏明确界定，系统将自动生成不可见的轨道。在常规操作中，我们可通过设置`grid-auto-columns`与`grid-auto-rows`属性来调整这些隐形轨道的尺寸。

语法：

.container {
  grid-auto-columns:  ...;
  grid-auto-rows:  ...;
}

如下示例，创建了一个2行2列的网格：

.container {
设置网格列宽分别为60像素和60像素；
设置网格行高分别为90像素和90像素；
}

现在，让我们设想一下，您正运用grid-column与grid-row属性来精确定位您的网格元素，情形如下所示：

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

grid-column与grid-row通过网格线的编号来确定轨道的尺寸，例如，上述轨道的范围是从第5列到第6列，而行轨道的范围则是从第2行到第3行。关于网格线定位的相关内容，此处将不做详细阐述，后续将专门撰写一篇文章进行说明。

上述代码中，item-b单元格的设定是从第五列起始，至第六列结束，然而我们并未对第五至第六列进行具体定义。此处所见的虚线列实际上构成了一个不可见的通道。若需调整这些不可见通道的尺寸，我们可以通过设置grid-auto-columns和grid-auto-rows属性来明确指定这些隐含轨道的宽度。

.container {
  grid-auto-columns: 60px;
}

如上图中，隐形轨道的列宽是60px。

总结：

关于网格轨道的众多细节，前文已详细阐述。您是否觉得内容颇为丰富？确实如此，CSS中的这一新兴规范——网格，其卓越的功能令人激动不已，然而这也相应地增加了学习的挑战性。本文仅对网格的一部分知识进行了探讨，未来还将继续为大家介绍更多相关内容。

感谢关注，以上内容难免有误，欢迎指正。

上篇：前端入门——css Grid网格基础知识