CSS网格被前端开发者和设计师用来构建各种现代网页布局和界面——事实上，它是Slack和Webflow Style面板等应用的布局结构。但它可以用来创建从基本结构到整个网站的任何东西。
我们将在6部分中介绍基于网格的布局:我们将展示如何创建和配置网格，我们将讨论神奇的div块，我们将使用网格AUTO位置来创建图像网格布局，我们将使用手动位置和重叠来创建四象限英雄部分，我们将使用网格模板区域进入可重用布局，然后我们将介绍使网格布局响应不同设备的工作。
现在。在我们开始之前，让我们澄清一些事情。网格是参考线。这与在iOS上安排应用程序和小部件没有什么不同。(你可以把东西推来推去，但是网格里面的东西会被柱子引导……和行。)
这是CSS网格的默认行为(东西是自动定位的…当用完列时，它们会换行到下一行)。但这仅仅是个开始。因为你可以做得更多。
记住这些，让我们从基础开始。任何东西都可以是网格。几乎任何事情。这里有一部分。点击网格?现在你有了一个网格。这是一个div块。点击网格?现在你有了一个网格。在添加面板上? There’s a grid you can just drag right in. Collection list filled with dynamic content from the CMS? Set its display setting to Grid? Now you have a grid. Working on a late-night project and accidentally spill coffee, causing your other hand to lean in just the perfect way on your macOS-compatible keyboard to press both the Command and E keys at the same time? Start typing Grid, press Enter. Now you have a grid.
现在。这是Mac上的，Windows上不一样。Grimur吗?
格里莫:我正在做一个深夜项目，不小心把咖啡洒了，导致我的另一只手以一种完美的方式靠在我的windows兼容键盘上，同时按下了CONTROL和E键。
McGuire:开始输入Grid，按Enter。现在他有了一个网格。
我们如何使用网格呢?我们把东西放进去。默认情况下，内容会占用可用的单元格，并自动换行到下一行。实际上，将自动创建新行。
在任何时候，编辑一个网格…按编辑网格。现在您正在编辑网格。在编辑时，可以向网格中添加列或行。注意内容是如何自动换行来填充里面的空间的。一旦我们完成了网格的编辑，让我们关闭。
这是第一件看起来很奇怪的事情:如果我们想把一个元素拖到右下角的单元格?它只是…是行不通的。但这是意料之中的。这是因为添加到网格中的元素在默认情况下是自动定位的。如果我们想手动定位它呢?把它设为手动。现在我们可以把它拖到任何地方。
我们将在稍后讨论手动位置时更详细地讨论这一点，但这里有一个非常重要的点要说明。
这是一个网站，我们建立在CSS网格。但事实并非如此。这是微软的Excel。在电子表格或表格中，删除一行或一列通常会破坏其中的内容。
网络上的网格是不同的。因为它们是参考线，所以删除列或行可能会将内容推到周围，但不会删除实际内容。
这是主要的想法:没有错误的移动，你可以在创建一个网格。网格是非破坏性的，因为它们只是我们放入的内容的参考线。
让我们进一步编辑我们的网格。这里有很多选择。我们可以点击和拖动，这样我们就可以调整这个空间(你可以调整行和列之间的间隙)。
但还有更好的。想要调整列本身吗?你也可以这样做;您可以通过点击和拖动来调整列的大小-当您编辑网格时，您可以在画布上进行此操作。
顺便说一下，FR(这些列上的FR单位)?这些都是小数单位。因为在网格出现之前，我们需要手动计算百分比，像素值等内容(你仍然可以使用这些)…但FRs取代了每个人管理自己的笛卡尔坐标系统，取而代之的是更直接的东西。它是这样的:
三列?每个设置为1 FR?这意味着每个都将占据宽度的1/3。四列?1个FR ?现在每个都占了1/4。数学已经为我们完成了，所以如果我们想让这一列的宽度是其他列的两倍，我们只需将其设置为2fr。注意其他所有内容是如何自动缩放的。这里还有一件事要注意:我们提到了每个细胞之间的间隙。你可以改变这些差距，fr仍然会弥补这一点。
FRs有魔力吗?没有;他们的科学。还有魔法。
当你完成编辑网格时，记住你总是可以回来更改东西，但现在，我们可以按Escape键，或者按下“DONE”按钮。
所以。网格。我们可以做一个网格，设置一些行和列，然后开始往里面放东西。它们会自动定位自己，但我们可以通过将一个或多个元素设置为手动定位来偏离这一点。(然后我们可以在网格中移动它。)
让我们转到神奇的Div块。因为如果你还没有注意到，有些奇怪的事情正在发生。像这样的实用布局并不多见。我们经常听到这样的问题:“是的，网格，但我们如何使用它?”撇开语法不谈，这里有一点很重要。基于网格的布局通常需要嵌套内容(标题、段落、按钮、图像等等)——网格布局通常需要在单个单元格中放置多个内容。
所以。我们只是把东西设置为手动位置，然后把它们拖到同一个单元格中吗?嗯…不。现在它们都堆在一起，一团糟。
进入神奇的div块。它是一个div块。但我们称之为魔法。想法是这样的:我们可以拖进一个div块它占用了一个单元格。我们可以把它放在任何地方……现在我们可以把东西放入div块。
如果这是我们的网格，我们希望这些东西在里面，我们在单元格中放一个DIV块。我们把我们想要的东西放在…在div块中。确保放置元素的最精确方法是使用Navigator(稍后我们将介绍在画布上执行此操作的快捷方式)。
但这是第二个重要的想法(我们讨论了网格是如何指导我们的内容的)…但这里的第二个收获是网格单元不是真正的容器(它们不是div块，默认情况下，它们一次只容纳一个东西)。
所以div块给了我们在网格单元格中放置多个元素的能力。
这是我们的两个要点:网格引导我们的内容，div块让我们在网格中的任何CELL中嵌入多个东西。
但让我们把它变成真实的，并把它放到真实的布局中。要做到这一点，让我们执行auto position FIRST。通过构建这个图像网格。
这个很简单。对于我们来说，我们有一个空白的部分和一个空白的容器……我们将使用一个网格(只需从添加面板中拖拽一个网格，并将其放置在容器中——这样我们就可以将网格和图像包含在设计的中心)。
但现在，让我们添加图像。如我们所知，向我们的网格中添加东西?我们只需点击并拖拽它。(我们正在使用图像，但这可能是标题或链接或div块或视频…)。
在我们继续之前，让我们编辑一下我们的网格——让我们把它做成4x4(记住:我们总是可以改变这个)。什么时候结束?我们停止编辑吧。
让我们继续把图像拖进去。但是请注意，就像我们前面提到的，无论我们在哪里放手，内容都是自动放置的。网格的孩子(里面的图像)只是包裹和填充网格内可用的单元格。(这是自动的。)
事实上，如果我们再编辑一遍?例如，我们可以更改列的数量。同样，在Excel、数字、谷歌表格或冰块托盘中，去掉一列是极具破坏性的，会破坏里面的东西。但在这里……我们的图像很好。它们现在只是占用更少的列(它们自动换行)。完事后，我们就回去。
关于SIZE需要注意的是…是这些行(网格中每一行的高度)——这是自动调整大小的。由于网格(和容器和部分)-因为这些都没有高度设置，一个选择是只设置高度在我们的网格。让我们选择800像素，但我们可以随时更改。
但现在它有点不一致-这些图像具有不同的长宽比;它们都对齐到每个单元格的左上角…让我们开始控制它。选择GRID之后，让我们看看这里的选项。我们可以结盟…或对齐网格中的任何CHILDREN元素。
现在。特别是图像，有时设计师希望像这样的图像更一致(具有相同的行高，相同的宽高比)。
一个很好的方法就是拟合(对象拟合)。这是100%的魔法。而且它(大多数时候)是有效的。
现在。在拍摄之前，我们对这些图像预先应用了相同的类。你可以看出来…因为每张图片上都写着“我们预先应用的类”。如果我们没有这样做，我们总是可以在以后添加一个类。但我们做到了。
所以。均匀地匹配图像?我们只需要做两件事:(1)我们设置尺寸(我们设置100%的宽度…100%的高度)。(2)我们使用对象拟合。(我们在应用于图像的CLASS上做所有这些)。我们将设置FIT…封面。
就像这样，所有的物体都适合它们的细胞。注意行高是完全相等的。
现在。这个网格现在的大小是怎样的?让我们回到过去，因为一分钟前我们把高度设置为800像素。如果我们删除网格上的高度会发生什么?它会趋近于0吗?
几乎。实际上，如果仔细观察，它仍然有GAP(行之间的空间)。但是因为我们将每个图像的高度定义为100%，所以它们只会和行本身一样高。它们没有高度。这就是为什么这一切都崩溃了。所以。如果我们输入一个数字?(如果我们给网格一个高度?)它的大小相应。
当然，蓝色属性标签变成蓝色是因为我们对这个类做了一些改变。而且，正如我们所知道的，AMBER属性标签表明这个类上的值来自其他地方。但是PINK标签呢?
让我们从这些图像中选择一个并SPAN它(我们要抓住角落…点击和拖动…跨度)。所以我们的网格不是一个单元格，而是跨越多个单元格。我们可以在样式面板中看到它:我们可以看到它跨越了多少列和多少行。该信息存储在ELEMENT中。这就是粉色标签的含义——这并不适用于我们之前预应用的整个类，称为“我们预应用的类”——它只影响SELECTED元素。
这是使用图像网格的自动定位。手动定位和重叠怎么办?为了说明这一点，让我们构建这个英雄部分。但要做到这一点，让我们首先让我们的英雄部分并排(我们稍后会讨论为什么)。
为此，我们只需要拖拽一个Section元素(将其拖拽到页面主体中)。然后我们将设置一个高度(让我们将最小高度设置为70vh——这样它就是视口高度的70%)。
我们要做的就是并肩作战吗?只要设置Section…网格。(两列…现在我们可以并肩建造了。)
我们先从左边放一张图片开始。让我们转到Assets面板，并在左侧拖动我们想要的图像(将其放到我们的Grid部分)。默认情况下(如我们所知)，它位于第一个可用单元格(左上角)中。我们希望我们的图像占据所有可用的空间。
幸运的是，我们刚刚复习了对象FIT。就像我们之前做的一样，我们做了两件事来使这个工作完美。我们可以(1)添加尺寸(将图像的宽度和高度设置为100%)…(2)我们可以将FIT设置为Cover。(现在我们的图像……正在覆盖第一个单元格。)
但这不是我们说过要做的。
选定图像后，让我们张成它。(我们希望单击并拖动该元素，使其跨越左列的两个单元格。)就是这样。同样，生成就是这么简单。想要跨TOP两个单元格吗?点击并拖动…它是张成的。想放回去吗?把它张成。
跨度。这个词你说得越多，听起来就越奇怪。
这是左边的并排。那右边的呢?这是我们回到Div块的地方。我们将把一个div块直接拖到网格中，它可以放在下一个可用的单元格中。张成它?我们张成它。这就是并排。
如果我们想在里面放一个标题呢?让我们来演示一下错误的做法。拖动标题…在右边吗?放手吗?这个…这不是我们想要的。记住:将某些东西拖到网格中与将某些东西拖到网格中的Div块中是不同的。
所以为了确保我们做对了，让我们撤销…然后再试一次，但这次让我们按住macOS上的Command或Windows上的Control…然后把标题拖到Div块中。我们可以在Navigator中验证这一点。(标题在div块中…在网格中。)
让我们对段落做同样的事情——这次我们可以把段落拖到导航器本身(就在标题下面)。
最后，我们添加一些按钮。这一次(因为我们已经养成了展示不同添加方式的习惯)……我们的段落仍然被选中，我们可以在它后面添加一些东西。我们将使用快速查找。
我们可以通过按Command + E(或Windows上的Control + E)并开始键入按钮来完成。它不仅仅是元素(它甚至是我们设计和保存的其他布局)。一旦我们选择了它?它就放在段落的后面。
现在。如何垂直居中呢?有几种方法。我们可以选择网格本身。如果我们想让子元素对齐到中心…我们只是…与中心对齐。
或者，如果我们想撤销它，我们可以使用flexbox(我们可以将flexbox应用到Div块本身，并确保它被设置为垂直，我们可以打乱我们的对齐或对齐控件，使它按照我们想要的方式工作)。
如果我们再次选择网格，点击编辑?我们可以调整甚至删除间隙(只需将那里的间隙设置为0)-所以现在它与图像真正的50/50分割。右边的内容呢?我们可以使用Div块(顺便说一下，让我们将其命名为“Hero content”以保持条理)。
但是等一下。这部分称为手动位置。到目前为止……一切都使用AUTO定位。(我们已经覆盖跨度，但我们没有使用手动位置在这个布局)。所以。我们的目标是什么?我们的目标……将我们的英雄内容放在右下角的单元格中。我们怎么做呢?
嗯…我们刚刚将左边的图像设置为手动位置…并将div块设置为手动位置。现在呢?我们可以选择和SPAN我们的图像占用所有四个单元格。如果我们想让flexbox Div块定位在右下方呢?我们把它张成向下，所以它占据了右下角的单元格。现在我们有一个基本的重叠。
它令人震惊吗?还没有。这里有几件事:(1)我们需要让背景更不可怕。因此，在Div块(英雄内容块)中，我们可以添加一个背景色。但是(2)我们应该算出行高是怎么变化的。因为您可能会注意到第二行的高度不再是HALF -因为我们也将CONTENT的高度添加到底部行。我们可以将每一行设置为1fr吗?两者都可以用分数单位吗?嗯,是的。实际上，这仍然会尊重里面的内容，但会给我们更多偶数行。 But we could also make the BOTTOM row Auto. That’ll mean the SIZE of the bottom row is determined ONLY by the content inside. And when we do that, we can now add breathing room by adding PADDING (just add some padding to the Hero content block).
但这是手动定位和重叠。可重用布局呢?这部分进行得很快。因为，这里有一个部分。让我们给它一个高度(假设是750像素)。我们把它变成一个网格。但是这一次，让我们在一个网格内设置我们的布局。无论我们如何配置我们的网格…我们可以定义网格区域(只需单击小加号即可开始定义网格区域)。这让我们可以定义可以容纳内容的网格区域(换句话说，我们定义了布局的各个部分)。 But the REASON this is important is because we can REUSE these entire layouts in other parts of our project.
但重要的是。这个布局吗?这是班级的一部分。事实上，我们可以将这个类重命名为“示例布局”(还有更聪明的选择)…我们可以把它应用到另一个元素上。因此，让我们在这个下面添加另一个部分(当然，您可以将其添加到项目中的任何页面)。我们注意到了什么?嗯，还没有。我们必须应用示例布局类。
但是现在我们注意到了什么?它的布局不仅遵循相同的规则，而且……它是空白的。如果我们在布局中添加其他东西呢?(这些都只是div块，里面有一些东西——再说一次，我们使用的是普通的旧div块，我们有时称之为“神奇的”，作为小容器——我们放在网格单元格里的容器。)如果我们编辑网格会发生什么呢?它是独一无二的吗?不。因为这是一个可重用的布局，我们可以定义我们的区域，甚至在事实之后重新定义我们的区域。整个项目的布局都在变化。
说得更实际些?我们可以使用area来定义整个布局。这意味着任何一个区域的改变都会影响到使用这个类的所有网格。但那是网格模板区域。
让我们结束对响应式设计的讨论。网格默认是响应式的。因为每一栏的宽度通常是用fr来确定的，所以它通常会尊重这些比例和里面的内容。随着浏览器越来越窄，所有东西都会相应地缩放。
但是如果你想在另一个视图中改变一些东西呢?想要针对不同的设备进行设计?我们可以做出改变。即使我们改变列数，并将网格子节点设置为auto?(如果网格的子节点是自动定位的?)它们会像你期望的那样进行响应式包装。回到桌面?一切如常。
这是因为更改从基本断点向下延伸，这意味着当您更改桌面上的内容时，会影响平板电脑和移动视图。你在平板电脑上添加或更改的东西也会影响手机。(这里有一个模式。)移动景观更改会影响移动肖像。当我们往下看不同的视图时，变化只影响较小的设备。
你会注意到，如果你有手动操作?(如果某些东西被设置为手动位置?)如果你没有告诉它你想让它做什么，例如，一个较小的断点，它就会卡住。即使您删除了一列，如果手动放置了某些内容，您也必须手动将其放置在新列中，或者将其位置设置为自动。
现在。关于手动定位有一点需要注意:如果你在画布上重新定位一个元素(如果你在网格中移动它)?它对实际的文档顺序没有影响。为什么这很重要?如果你在浏览或使用像VoiceOver这样的屏幕阅读器，默认情况下，它会遵循你在NAVIGATOR中看到的顺序(文档顺序)。当这个元素被选中时，注意它在导航器中的位置没有改变，即使我们使用手动位置来移动它(顺便说一下，这也适用于网格区域)。当你在网格中组织内容时，记住这一点是至关重要的:确保顺序(你希望别人理解你的内容的方式)——确保在导航器中设置，然后根据需要进行视觉调整。这不仅是合乎逻辑的、正确的、高效的，而且是朝着开发更容易访问的网站的正确方向迈出的一步。
以上就是CSS网格响应式设计的概述。
所以。我们的两大收获:(1)网格作为参考线(删除一行或列不会删除里面的东西)。(2)网格单元通常一次只能容纳一个东西。所以将DIV BLOCK放入单元格中可以解锁SUPERPOWERS……让我们把其他东西放到Div block中。
所以。让我们快速回顾一下Grid。我们可以像添加其他元素一样添加网格。我们可以把东西放到一个网格里，它们就会自动被放置。它们会填满空白的空间……当然，除非你把某些东西设置为手动，在这种情况下，你可以让那个孩子做任何你想做的事。像父母。但事实并非如此。
我们可以跨越和重叠事物……我们可以创建可重用的布局，当我们把那个类应用到其他东西上时，那个布局会延续下去。我们可以进行响应式设计(采用网格布局，可能在桌面上工作得很好，但可能在较小的视图上删除一些列)。
现在。这方面我们讲得更多……比如自动适配，网格中的密集设置，设计更大的断点，何时使用flexx与何时使用GRID -所有这些都在Webflow大学。如果你还没看过，可以去看看。
但这是网格的概述…Webflow。
