网格

网格元素历史

自从CSS网格规范几年前，我们的整个团队(但主要是Kory)都对它的影响感到非常兴奋，原因如下:

• 除了支持flexbox的布局，浏览器也可以最后拥有两个真正强大的布局引擎，可以探索不同于以往的设计和内容结构。
• 我们想看看是否有某种方法可以让我们把这种新的布局范式的力量转化为我们的构建器。

我们不得不等待一段时间，直到规范本身最终确定，并在主要浏览器供应商中实现，但快进到今天，我们就在这里- - - - - -发布我们全新的网格元素!网格元素是CSS网格规范本身的一个相对纯粹的抽象，它允许你:

• 定义独特的grid-template-column而且grid-template-row任何断点的布局。
• 指定证明- *而且对齐- *整个网格上的值。
• 集grid-gap横过X轴和Y轴的值。
• 可选地将网格中的每个Cell放置在任意断点的任意网格轨道上。
• 可选地指定唯一justify-self而且align-self为任何断点的网格中的每个Cell设置值。

网格规范有很多内容，所以让我们＇我们花点时间复习一些基本的术语，然后我们分解它，以便我们＇在检查它在网格元素中的实现之前，我们都在同一页上:

• 网格 - - - - - -整个布局模板定义网格结构的父容器，可以在其中放置单元格。
• 细胞 - - - - - -网格的直接子元素，可以放置在布局模板定义的网格轨迹之间的任何位置。
• 布局模板 - - - - - -定义网格的整体结构以及单元格可以放置的位置。由grid-template-columns这就在X轴而且grid-template-rows这就在Y轴。
• 跟踪 - - - - - -布局模板的行和列。
• 网格区域 - - - - - -轨道上任何特定的坐标组合。
• 列开始/结束 - - - - - -网格区域坐标沿X轴。
• 开始/结束 - - - - - -网格区域坐标沿Y轴。
• 证明- * - - - - - -放置内容沿X轴。
• 对齐- * - - - - - -放置内容沿Y轴。
• {{证明|对齐}}内容 - - - - - -父元素中的所有内容。
• {{证明|对齐}}—— - - - - - -所有相关网格区域内的内容。
• {{证明|对齐}}自我 - - - - - -一个特定网格区域的内容。

Grid Spec vs. Flexbox

Flexbox布局和CSS网格布局之间的主要区别是Flexbox专注于一维在特定的轴上元素之间的关系(例如，让项目增长到填充主轴上的所有可用空间)，而CSS Grid允许用户创建二维在X轴和Y轴上的细胞之间的关系。例如，我们可以用grid-template-rows为了在我们的网格中定义行轨迹，它们都使用相同的高度，保持统一的垂直顺序(下面的示例显示了我们的网格编辑器覆盖，以便更容易地可视化轨迹):

注意网格是如何有一个整体模板和单元格(橙色)被放置在布局中。这个特殊的例子展示了CSS网格的另一个巨大的功能，很容易利用我们的网格元素:源的顺序独立性。这实际上意味着如果我们想，我们可以将单元格放置在整个布局模板中任何我们想要的位置，而不管它们在物理标记中的实际位置。这意味着，出于搜索引擎优化和可访问性的原因，我们总是可以确保我们的主要内容是第一个，但我们可以直观地将其放置在我们整体布局的任何地方。

CSS Grid的另一个优点是能够有多个单元格占用重叠的网格区域元素的简单分层。注意下面的例子中，该部分右半部分的背景设计是如何具体地放置在主要内容后面的网格上的。这是通过添加一个带有背景图像的空白单元格来实现的，这使我们能够在整个布局中放置这个单元格:

设置你的第一个网格布局

CSS网格的一个重大范式转变是网格内单元格的整体布局在网格本身上定义为高度声明性的CSS属性。例如，如果您只是想要一个具有100%的宽单元格中，每个单元格在新行中出现在前一个单元格的下面，则可以在网格布局控制:

上面的例子将输出到我们的动态CSS:

.dynamic-grid-123 {grid-template-columns: 1fr;grid-template-rows:汽车;｝

的1 frunit是CSS Grid语法的一个新值，它有效地定义了一个“分数”列，它将占用尽可能多的可用空间。因为我们只有一个单人间1 fr我们的价值grid-template-columns属性，这将强制所有单元格跨越整个网格宽度。的汽车的值。grid-template-rows属性只是允许将任何新的cell添加到新的行上。

那么如果你想添加一个四列的网格呢?我们只需要再加三个1 fr单位进入我们的列模板输入:

上面的紫色空间向我们展示了网格布局在实时预览中的近似表现。既然我们＇我们已经定义了四列网格，假设我们在网格元素中添加了8个cell，它们的输出如下:

请注意，由于单元格的数量超过了网格上定义的列布局，我们如何在第四个单元格之后获得新行。现在这些细胞正在使用汽车位置,这意味着它们将简单地按照它们被添加的顺序出现在Grid中(类似于Columns在Rows中的工作方式)。稍后，我们将探索利用布局明确的位置用于更复杂的网格模板上的单元格。

编写上述语法的另一种方便方法是使用重复()CSS函数，该函数将一个数字作为第一个参数，以定义第二个参数中指定的值应该输出多少次。例如，如果我们想输出我们的1fr 1fr 1fr 1fr值大于时，我们将使用:

这对于我们想要表达复杂的重复模式的情况特别有用，稍后我们将更详细地探讨这种情况。

最后，请注意，这些模板可以唯一地定义每一个断点,这意味着您的布局可以完全自定义，以满足您在每个特定断点上的需求。既然我们＇we’我们已经熟悉了CSS网格的布局工作方式＇让我们来看看网格元素本身的一些附加设置控件。

网格设置控件

除了前面探索的网格布局控制组之外，您还可以＇我会找到一个网格的设置控制组类似于我们在许多其他元素上使用的设置框:

其中一些控件你已经很熟悉了，比如字体大小、Z-Index、全局容器和其他布局元素上的背景。除了这些，我们还有我们的X＆Y内容位置,X＆Y项放置和X＆Y的差距控制。

X和Y内容输出到justify-content而且align-content它们分别处理网格元素中所有内容的整体位置。要了解更多关于这些CSS属性及其工作原理的知识，强烈建议你从官方来源(如MDN web docs)上阅读它们:

• justify-content
• align-content

X和Y项输出到justify-items而且对齐项目它们分别处理Cell中所有内容的整体位置。要了解更多关于这些CSS属性及其工作原理的知识，强烈建议你从官方来源(如MDN web docs)上阅读它们:

• justify-items
• 对齐项目

X和Y差距控制网格中单元格之间沿其相应轴的间距。根据您的设计类型相应地调整这些值＇we’我们去。

单元格位置控制

当使用网格元素时，添加到布局中的任何新单元格都将被利用汽车位置,你们会在细胞布局任何未放置Cell的对照组:

这种自动放置的行为类似于列在行中的工作方式，每个连续的单元格将遵循您所定义的元素的整体结构(即，如果您有一个相对简单的两列网格并添加三个单元格，第三个单元格将简单地换行)。这是很棒的，我们可以使用它与一些很酷的技巧，如auto-fit利用自动响应列的优势，但CSS Grid的最大优势之一是能够定义复杂的基本模板，然后在整个布局的任何地方放置单元格。一旦你＇你已经定义了一个基本模板＇这是你可以调整单元格的方法之一＇S在模板上的位置是通过点击进入这个控制组，这将显示如下:

这就是事情开始发生的地方很有趣,因为它＇it’这些控件真正释放了CSS网格布局的真正力量。这里可用的控件对应于以下CSS属性(强烈建议你花点时间阅读MDN web文档上的官方文档链接在这里):

• X轴启动 - - - - - -grid-column-start
• X轴结束 - - - - - -grid-column-end
• X轴对齐 - - - - - -justify-self
• Y轴开始 - - - - - -grid-row-start
• Y轴结束 - - - - - -grid-row-end
• Y轴对齐 - - - - - -align-self

例如，假设您有一个包含8个已定义列和4个已定义行的网格模板，并且您想要一个特定的Cell从第二个网格列轨道和第二个网格行轨道开始。然后，假设您希望它跨越两个列和行轨迹，以及水平和垂直地将其内容置于该空间的中心。你可以这样做:

如您所见，在网格中放置单元格时，需要跟踪相当多的信息。我们必须注意行和列的轨道计数，指定多个值以使我们的Cell刚刚好，然后对于我们想要进行的每一个微小更改，我们必须每次更新每个这些坐标。我们希望帮助降低这种复杂性，使单元格的放置更加简单，这就是为什么我们引入了我们的单元格布局编辑器在预览中。

单元格布局编辑器

其中一件事＇我们最感兴趣的是网格元素的引入单元格布局编辑器，这是一个可切换的界面在预览，你可以跳进去和出来，轻松调整单元格的位置在整个网格。让＇让我们以之前的“形状很棒”为例，再检查一次:

这个例子中的整个布局是使用新的Grid Element创建的。对于页面上的任何网格元素，将鼠标悬停在其上，将在网格元素的右上角显示一个小的紫色图标。点击该按钮将启用单元格布局编辑器:

有一件事要注意这个布局是我们已经设置了所有的grid-gap值0 px，并使用模板作为一个整体来创建我们想要在单元格之间使用的间距。这只是另一种使用网格元素探索间距和布局的方法。

当你在此编辑模式下悬停在单元格上时，你会注意到在你当前悬停的单元格的角落里出现了四个插入符号:

将鼠标放在特定的单元格上，然后您可以单击单元格的中心来拖整个单元格，或者您可以单击其中一个插入符号调整细胞。这些操作中的任何一个都会将颜色聚焦在您当前正在交互的单元格上:

如前所述，我们可以执行的操作之一是阻力,谁来维持细胞＇S的总体积。例如，您将注意到在这个特定的网格中，被拖动的Cell有一个4 x1当你在网格中移动它时，它将保持该区域(注意，当这样做时，你的单元格可能会根据轨道的大小而增长或缩小＇重新移动它到):

此外，您可以调整通过单击并拖动单元格角落中四个插入符号中的一个来实现此单元格。调整大小允许您更改网格单元格的整体区域:

如果我们要将Cell放到上面例子中突出显示的区域，我们最终会得到以下输出:

请注意，如果我们再次打开单元格布局编辑器，您将看到单元格已经简单地填充了之前指定的区域:

当单元格布局编辑器打开时，单元格的任何移动都将调整前一节中提到的位置输入。这样做的好处是，如果你在编辑器打开的时候拖动或调整Cell的大小，你不仅可以得到即时的视觉反馈，看到什么是最好的，而且编辑器会自动处理所有的数学问题，为你正确放置Cell。

此外，您可能已经注意到在整个示例中使用了不同的颜色和线条。它们被用作有用的指示器，让你更好地了解你的布局是如何表现的，并代表网格模板的不同方面:

• 虚线 - - - - - -表示一个未占用的网格区域或跨多个轨道的单元格的内部。
• 实线 - - - - - -表示单元格的外部边界。
• 紫色的 - - - - - -指示未占用的网格区域或自动放置的单元格。
• 橙色 - - - - - -指示网格上未使用自动布局的“放置”单元格。

最后，重要的是要注意使用单元格布局编辑器对单元格的任何移动都只会更新该单元格＇S的位置，用于当前查看站点的特定断点。如果您希望在所有断点上都有特定的Cell位置，则需要自己显式地这样做。

一些布局理念

正如前面提到的，CSS Grid最伟大的事情之一是它能够更清楚地定义一个布局的预期行为，并显式地将单元格精确地放置在你想要它们去的地方。这在你想要有两个重叠的cell来产生分层效果的情况下特别有用(可能是一边的大图，另一边的一些文本放在图像的顶部)。一个非常简洁的方法是使用如下的布局:

如果我们打开单元格布局编辑器，我们可以更清楚地看到＇这里发生了什么:

然后如果我们看一下我们的Grid Layout控件组，我们可以更清楚地看到什么＇年代发生:

基本上,我们＇的列模板1fr 4rem 1fr要定义一个三列布局，其中两个等宽的列指向外侧，一个固定宽度的列位于中间。的中间值4快速眼动用于指定完全我们希望在两个cell之间有多少重叠。然后，将每个Cell简单地放置到网格的边缘，并跨越中间的列轨道。

的行模板4rem 1fr 4rem用来定义我们的第二个Cell＇与网格边缘的上下间距。的1 fr在中间允许确保两个单元格垂直对齐，因为他们应该。

所有这一切的好处是，一旦您设置了它，您就可以返回并从Grid父节点上的一个位置调整重叠值或间隙值，而不必跨每个Cell在多个位置管理它，从而极大地简化了寻找用于设计的完美尺寸的探索过程。当然，还有它＇S都是完全响应的，所以我们可能希望有这样的布局LG而且XL断点，但对较小的断点使用完全不同的东西:

将这个响应式模板的想法提升到一个全新的水平＇下面是一个简单的例子，展示了我们在设计中可以跨多个断点使用网格模板和单元格的位置:

注意Grid列和行跟踪计数的总体变化，以及每个断点的每个Cell的位置。这是真正的灵活性，不同于任何你＇这是我见过的最简单的布局工具。我们将与大家一起探索更多的布局可能性YouTube频道在接下来的几个月里，所以如果你还没有订阅，一定要订阅＇T已经跟上我们的最新内容!

网格上下文菜单

一个闪亮的新建筑工人不会＇如果没有一些闪亮的新上下文菜单动作，它就不完整了，不是吗?右键单击预览或布局窗格中的任何单元格将显示以下上下文菜单:

您可以使用带到前面，提出退到最后,而且发送回，动作来更新网格中单元格的顺序。请记住，这只会改变Cell在物理标记中的位置，但是如果您有z - index值，而不是汽车，该值将始终覆盖一般标记顺序。此外,使用自动放置将快速重置单元格＇S定位回到自动放置。

此外，还可以右键单击任意网格布局或细胞布局控制框复制特定断点上的布局，并将其粘贴到单个断点或应用于所有其他断点，以便快速更改布局。

定制

自定义窗格由各种功能组成，允许您进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制，特别是对嵌套标记的控制。点击在这里有关此特性的详细信息，如使用el美元来动态地定位基本标签，等等。
• 在断点期间隐藏 - - - - - -当需要改变设计时，以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素。”如果设置了特色图像…”)．点击在这里获取更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ")．这在与各种脚本和库集成时尤其有用。
• 循环器提供者和消费者 - - - - - -使用这些控件来访问您的WordPress安装中的信息，并使用我们的构建器中的元素将其输出到您的网站前端。点击在这里获取更多信息。

视频教程

加入Themeco的首席开发人员Kory Wakefield，他会在YouTube上带你体验这个令人兴奋的新元素。这7-part系列将带你从初学者到网格专业在任何时间。更好的是，Design Cloud已经添加了几个网格模板，可以帮助您快速启动和运行!

演示

要查看网格元素的现场演示，请单击在这里．

总结

总之，我们已经讨论了Pro的专属网格元素。我们已经讨论了Grid Element是向页面添加网格的简单工具，我们还学习了如何更改其内容、设计和设置。