你想了解的CSS网格【CSS Grid】技术点都在这里了

本教程将深入探讨CSS网格布局，探索几乎所有属性和功能。最后，您将完全有能力使用此出色的CSS附加功能处理任何布局。

术语：网格

网格是二维网格系统。它可以用来构建复杂的布局以及小的用户界面。

属性：显示

要使元素成为网格，请将其显示属性设置为grid。

.grid-to-be {
    display: grid;
}

这样做使得.grid - 到 - 是一个网格容器及其子网格项目。

术语：网格线

定义明确的网格轨迹时会创建网格线。您可以使用它们分别放置网格项。

术语：网格轨迹

网格线是两条网格线之间的空间。网格中的行和列是网格轨道。

属性：网格模板列

我们可以使用grid - template - columns属性创建列。要定义列，请按照您希望它们在网格中出现的顺序，将此“ 网格 - 模板 - 列”属性设置为列大小。我们来看一下：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}

这定义了三个100px宽度的列。所有网格项目将按顺序排列在这些列中。行高将等于该行中最高元素的高度，但是可以使用grid - template - rows更改。

请注意，在仅定义列而未定义行的情况下，元素将填充列，然后在行中倒退。这是由于Grid使用网格线和网格线创建的隐式网格。

属性：grid-template-rows

网格 - 模板 - 行用于定义网格中行的数量和大小。它在语法上类似的网格 - 模板 - 行。

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;}

仅具有grid - template - rows属性而没有grid - template - columns会导致列宽等于该行中最宽元素的宽度。

属性：网格模板

grid是三个属性的简写：grid - templates - rows，grid - templates - columns和grid - templates - area。

您的使用方式如下：

.grid {
    grid-template:
        "header    header     header"  80px        "nav       article    article" 600px
        / 100px 1fr;}

您可以像通常那样定义模板区域，将每行的宽度放在其侧面，然后最后将所有列的宽度放在正斜杠之后。像以前一样，您可以将所有内容放在一行上。

数据类型

该FR单位是CSS网格布局创建一个新的单位。该FR单位帮助，而无需计算百分比，以创建灵活的网格。1fr表示可用空间的一小部分。可用空间分为定义的分数总数。因此，3fr 4fr 3fr将空间分为3 + 4 + 3 = 10部分，并分别为三个行/列分配可用空间的3、4和3部分。例如：

.grid {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr;
}

如果将固定单位与弹性单位混合，则分数的可用空间是在减去固定空间后计算的。让我们看另一个例子：

.grid {
    display: grid;
    grid-template-columns: 3fr 200px 3fr;
}

单个分数的宽度的计算方式如下：（宽度.grid--200px）/（3 + 3）。排水沟的空间（如果有的话）最初也会从的宽度中减去.grid。这是frs和%s 之间的区别，即百分比不包括您使用grid - gap定义的装订线。

此处3fr 200px 3fr基本上等于1fr 200px 1fr。

显式网格和隐式网格

显式网格是使用属性grid - template - rows和/或grid - template - columns创建的网格。隐式网格由Grid创建的网格线和网格轨道组成，以保存具有grid - template- *属性的手动创建的网格之外的项目。

自动放置

当我们创建这样的网格时：

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

即使我们仅定义了列，作为.grid的直接子元素的各个单元也会按行放置。这是因为Grid包含自动放置规则。

属性：网格自动列

要定义创建的列的大小，请使用grid - auto - columns属性来定义未由grid - template - columns定义的隐式创建的grid列轨道。默认值为auto ; 您可以将其设置为所需的任何值。

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-auto-columns: 50px;
}

属性：网格自动行

grid - auto - rows的工作方式类似于grid - auto - columns。要定义创建的行的大小，请使用grid - auto - rows属性，以隐式创建的网格行轨迹（未由grid - template - rows定义）。默认值为auto ; 您可以将其设置为所需的任何值。

.grid {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-auto-rows: 50px;
}

属性：网格自动流

该网 - 汽车 - 流属性控制网格单元获得流入电网：行或列中。默认值为row。

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-auto-flow: column;
}

上面的网格中的网格单元将一一填充，直到没有剩余的项目为止。

基于行的展示位置

使用行号将项目放置在网格中称为基于行的放置。

属性：grid-row-start

如果您希望特定的网格项从特定的行开始，则可以有如下所示：

.grid-item {
    grid-row-start: 3;
}

属性：网格行尾

如果您希望特定的网格项目在特定的行线上结束，则可以使用以下内容：

.grid-item {
    grid-row-end: 6;
}

属性：grid-column-start

如果您希望特定的网格项目从特定的列行开始，则可以有如下所示：

.grid-item {
    grid-column-start: 3;
}

属性：grid-column-end

如果您希望特定的网格项在特定的列行上结束，则可以使用以下内容：

.grid-item {
    grid-column-end: 6;
}

属性：网格行和网格列

您可以使用网格 - 行和网格 - 列属性来手动放置和调整网格项目的大小。每个属性是它们各自的star和end属性的简写：grid - row - start，grid - row - end，grid - column - start和grid - column - end。

我们使用正斜杠“ /”来分隔开始和结束值：

.grid-item {
    grid-column: 3 / 5;
    grid-row: 2 / 7;
}

属性：网格区域

您可以将grid-area用作grid-row和grid-column的简写。它是这样的：// //

.grid-item {
    grid-area: 2 / 3 / 7 / 5;
}

该代码的行为与上一个标题中的代码相同。

跨网格跨越元素

要跨网格跨越元素，可以使用grid - row或grid - column属性。设置起始行1和结束行-1。此处1表示相关轴上最左边的网格线，-1表示相关轴上最右边的网格线。在从右到左的书写脚本中，这是相反的，即1表示最右边的行，-1表示最左边的行。

.grid-item-weird {
    grid-column: 1 / -1;}

如果您希望单个项目占据整个网格，则可以对grid - row和grid - column都执行此操作：

.grid-item-weird {
    grid-row: 1 / -1;
    grid-column: 1 / -1;}

或者简单地：

.grid-item-weird {
    grid-area: 1 / 1 / -1 / -1;}

关键字：span

当使用grid - row和grid - column时，不用显式定义行号，而是可以使用span关键字来声明项目应覆盖的行数或列数：

.grid-item {
    grid-column: 3 / span 2;}

您也可以将项目固定在终点线上，并朝另一个方向跨越。下面的代码实现与上面相同的结果：

.grid-item {
    grid-column: span 2 / 5;}

您可以span以相同的方式使用行。

术语：网格单元

网格单元格是四个相交的网格线之间的空间，就像表格单元格一样。

术语：网格区域

网格区域是占据网格上一个矩形区域的网格单元。它们是使用命名的网格区域或基于行的放置创建的。

属性：网格模板区域（和网格区域）

不是把和大小的东西像单独的网格项目span，grid-column等等，你可以使用什么所谓的模板领域。该网 - 模板 - 区允许你命名一个网格，以便他们可以进一步通过网格项目被填满的区域。

.grid {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 100px 800px 100px;
    grid-template-areas:
        "header     header   header"
        "sidebar-1  content  sidebar-2"
        "footer     footer   footer"
}

这里一对引号代表一行网格。您可以将所有内容放在一行中，而不用对齐列，但是我所做的只是为了使它看起来更整洁。因此，首先我定义了三列三行，然后为每个单元命名。通过在第一行中重复执行“ header”三次，我告诉CSS要做的是用名为header的网格项覆盖整个过程。其余的也一样。

这是使用网格 - 模板 - 区域命名每个网格项目以具有为其定义的空间的方式：

.header {
    grid-area: header
}

.sidebar-1 {
    grid-area: sidebar-1
}

.content {
    grid-area: content
}

.sidebar-2 {
    grid-area: sidebar-2
}

.footer {
    grid-area: footer
}

没有什么比这更容易了，尤其是其他用于布置内容的CSS方法。

以前，您已经看到它grid-area也用于基于行的定位。

如果您想将单元格留空，则可以使用点：

.grid {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 100px 800px 100px;
    grid-template-areas:
        "header header header"
        "sidebar content sidebar"
        "footer footer ."
}

在此，页脚以第二列结束。

属性：网格模板

grid是三个属性的简写：grid - templates - rows，grid - templates - columns和grid - templates - area。

您的使用方式如下所示：

.grid {
    grid-template:
        "header    header     header"  80px
        "nav       article    article" 200px
        / 100px auto;
}

您可以像通常那样定义模板区域，将每行的宽度放在其侧面，然后最后将所有列的宽度放在正斜杠之后。像以前一样，您可以将所有内容放在一行上。

函数：repeat（）

在重复（）函数有助于使电网曲目列表的小非冗余和增添了几分语义层的给他们。使用起来非常简单直观。我们来看一下：

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); // this is the same as 1fr 1fr 1fr
}

您也可以重复某种形式的曲目列表，如下所示：

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr 2fr); // this is the same as: 1fr 2fr 1fr 2fr 1fr 2fr
}

repeat（）不必是值的唯一部分。您可以在其前后添加其他值。例如：grid-template-columns：2fr repeat（5，1fr）4fr;。

属性：网格

网格是六个属性简写：网 - 模板 - 行，格 - 模板 - 列，格 - 模板 - 的地区，电网 - 汽车 - 行，格 - 自动 - 列，以及电网 - 汽车 - 流。

首先，你可以使用像格 - 模板像这样（前面的例子）：

.grid {
    grid:
        "header    header     header"     80px
        "nav       article    article"    200px
        / 100px auto;
}

第二，它不是它的外观：即网格不像属性css：

是的，您没看错：一个名为css的属性。所有CSS属性的简写。我在涉及CSS和其他方面的超然冥想中的一次启发性体验中遇到了它。但是我不会教你如何使用它。我将其保留以备将来使用。然后，在CSS启蒙运动的阶梯上继续前进。

第三，以某种方式使用网格。您可以将网 - 模板 - 行有格 - 自动 - 列，也可混合电网 - 汽车 - 行有格 - 模板 - 列。这些语法非常简单：

.grid-item {
    /_ grid: <grid-template-rows> / <grid-auto-columns>; _/
    /_ grid: <grid-auto-rows> / <grid-template-columns>; _/
}

例如：

.grid-item-1 {
    grid: 50px 200px 200px/ auto-flow 60px;
}

.grid-item-2 {
    grid: auto-flow 50px / repeat(5, 1fr);
}

请注意，您实际上在该值之前使用了关键字自动流。

术语：装订线

装订线是单独分隔网格行和网格列的空间。grid - column - gap，grid - row - gap和grid - gap是用于定义装订线的属性。

属性：网格行间隙

grid - row - gap用于定义各个网格行之间的空间。它是这样的：

.grid {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-row-gap: 10px;
}

这将网格行彼此隔开10个像素。

属性：网格-列间隙

grid - column - gap用于定义各个网格列之间的空间。它是这样的：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-column-gap: 10px;
}

这将网格列彼此隔开10个像素。

属性：间隙

grid - gap是结合了grid - column - gap和grid - row - gap的简写属性。一个值定义两个装订线。例如：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
}

属性：订单

我们可以使用order属性控制网格单元的顺序。让我们看下面的例子：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
}

.grid .grid-cell:nth-child(5) {
    order: 1;
}

在上方，第五个网格单元被放置在网格的最后，因为其他网格单元根本没有定义顺序。如果定义，则将遵循数字顺序。两个或多个网格单元可以具有相同的顺序。具有相同顺序或完全没有顺序的文件将根据HTML文档的逻辑顺序进行放置。让我们在这里看看：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
}

.grid .grid-cell {
    order: 1
}

.grid .grid-cell:nth-child(5) {
    order: 2;
}

上面的示例产生的结果与前面的示例相同。

函数：minmax（）

该MINMAX（）函数是一个新的CSS网格布局。此功能使我们可以指定网格轨迹的最小和最大尺寸。

让我们看下面的例子：

.grid {
    display: grid;
    grid-template-columns: 1fr minmax(50px, 100px) 1fr;
}

使用上面的代码，在减小窗口宽度时，中间列将保持其100px宽度，直到第一列和最后一列减小到其内容的宽度为止。这对于制作响应式布局特别有用。

关键字：自动

如果父容器的尺寸是固定的（例如固定宽度），则auto作为网格项目宽度的关键字将使该项目充满整个容器宽度。在有多个项目的情况下，空格与frs 一样被划分。但是，如果auto与一起使用fr，则auto表现为该项目内容的宽度，剩余的可用空间除以组成frs。

函数：fitcontent（）

该fitcontent当你想宽度/高度表现得像（）函数的用法auto，但也有情况下，最大宽度/高度，你不希望它得到的是大的所有道路。

.grid-item {
    width: fitcontent(200px);
}

在这里，它在最小方面适合内容，在最大方面最大为200px。

关键字：自动填充

您可以使用自动 - 填充，以填补相关的轴（行或列）具有最多的网格轨道也不会溢出。实现此目的的方法是使用repeat（）函数：

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 50px);
}

但这会降低单个轨道的灵活性。通过将minmax（）与自动填充功能同时使用，可以同时具有灵活性。

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

这样，您可以在特定浏览器宽度中至少包含一列，并且最多包含50px的所有列。

请注意，即使可能未用单元格填充，自动填充*也会创建网格轨迹。

自动适应

汽车 - 配合行为一样自动 - 填充除了它折叠所有空重复轨道。空轨道是指没有放置网格项目或跨越网格项目的轨道。

稠密

借助密集关键字，您可以将项目回填到空网格单元格中，这些网格单元格是由于您尝试做的奇怪的事情而创建的，例如跨越和诸如此类。任何跨度，您可以使用密用关键字格 - 自动 - 流程是这样的：

.grid {
    display: grid;
    grid-template-column: repeat(auto-fill, minmax(50px, 1fr));
    grid-auto-flow: dense;
}

您可以在图库中使用它，但在使用表单时要特别小心。您通常需要特定顺序的表单子元素。

浏览器支持

在撰写本文时，对CSS Grid Layout有很好的浏览器支持。根据caniuse.com的说法，除Internet Explorer 11带有-ms-前缀的部分支持以及Opera Mini完全不支持的Internet Explorer 11之外，所有主流浏览器均支持CSS网格布局。

结论

与以前的方法系统相比，CSS Grid使我们能够以更高的控制力，便捷性和速度来进行布局。在本教程中，我们学习了Grid的所有主要元素，包括创建轨迹，定位和调整单元格的大小以及使网格流畅并使用诸如auto-fill和函数之类的关键字进行响应minmax()。