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吗?
Grimur:我在做一个深夜的项目，不小心洒了咖啡，导致我的另一只手完美地靠在我的windows兼容键盘上，同时按下CONTROL和E键。
麦圭尔:开始输入网格，按Enter。现在他有了一个网格。
我们如何使用网格呢?我们把东西放进去。默认情况下，内容会占用可用的单元格，并自动换行到下一行。实际上，将自动创建新行。
在任何时候，编辑一个网格…按编辑网格。现在您正在编辑网格。编辑时，可以向网格添加列或行。请注意，内容是如何自动包装以填充内部空间的。一旦我们完成了网格编辑，让我们关闭。
这是第一件看起来很奇怪的事情:如果我们想把一个元素拖到右下角的单元格?它只是…是行不通的。但这是意料之中的。这是因为添加到网格中的元素在默认情况下是自动定位的。如果我们想手动定位它?把它设置为手动。现在我们可以把它拖到任何地方。
稍后我们将详细讨论手动位置，但这里有一个非常重要的要点。
这是一个网站，我们建立在CSS网格。但事实并非如此。这是微软的Excel。在电子表格或表格中，删除一行或列通常会破坏其中的内容。
网络上的网格是不同的。因为它们是指南，所以删除一列或一行可能会产生一些影响，但并不是删除实际的内容。
这就是主要的思想:在创建网格时，你不可能做出错误的动作。网格是非破坏性的，因为它们只是我们将放入其中的内容的指南。
让我们进一步编辑我们的网格。这里有很多选择。我们可以点击和拖动，这样我们就可以调整空间(你可以调整行和列之间的间隙)。
但还有更好的。想要调整列本身?你也可以这样做;您可以通过单击和拖动来调整列的大小-当您编辑网格时，您可以在画布上进行此操作。
顺便说一下，FR(这些列上的FR单位)?这些是分数单位。因为在网格出现之前，我们会手动计算百分比、像素值(你现在仍然可以使用这些)……但FRs取代了每个人都必须管理自己的笛卡尔坐标系，取而代之的是更直接的东西。它是这样的:
三列?每组1 FR?这意味着每个都将占宽度的1/3。四列?每个1 FR ?现在各占1/4。我们已经算好了，如果我们想让这一列的宽度是其他列的两倍，我们只需要将它设置为2fr。注意其他的东西是如何自动缩放的。这里还有一件需要注意的事情:我们提到了每个单元格之间的间隙。你可以改变这些差距，FRs仍然可以弥补这一点。
FRs有魔力吗?没有;他们的科学。还有魔法。
当你完成编辑网格时，记住你总是可以回来改变东西，但现在，我们可以只按Escape，或按下表示“完成”的按钮。
所以。网格。我们可以做一个网格，设置一些行和列，然后开始把东西放进去。它们会自动定位自己，但我们可以通过将一个或多个元素设置为手动定位来偏离这一点。(然后我们可以将它移动到网格中的任何地方。)
让我们移动到神奇的Div块。因为如果你还没有注意到，有一些奇怪的事情发生了。像这样的实际布局并不多见。我们经常遇到这样的问题，“是的，网格，但是我们如何使用它?”抛开语法不谈，这里有一个重要的点。基于网格的布局通常需要嵌套东西(标题、段落、按钮、图像等等)——网格布局通常需要在单个单元格中放置多个东西。
所以。我们是否只是将内容设置为手动位置并将它们拖放到同一个单元格中?嗯…不。现在它们都堆在一起，一团糟。
进入:神奇的div块。它是一个div块。但我们称之为神奇。这个想法是这样的:我们可以拖动一个div块，占用一个单元格…我们可以把它放在任何地方……现在我们可以把东西放到div块里面了。
如果这是我们的网格，我们想要这些东西在里面，我们在单元格中放一个DIV块。我们把我们想要的东西在div块内部。确保我们放置元素的最精确的方法是使用Navigator(但我们将在稍后介绍在画布上执行此操作的快捷方式)。
但这是第二个重要的想法(我们讨论了网格如何引导我们的内容)…但这里的第二个要点是网格单元格不是真正的容器(它们不是div块，默认情况下，它们一次只保存一件东西)。
所以div块给了我们在网格单元格中放置多个元素的能力。
这就是我们的两个要点:网格引导我们的内容，div块让我们在网格的任何CELL中嵌套多个东西。
但是让我们把它变成真实的，并把它全部放进真实的布局中。要做到这一点，让我们执行auto position FIRST…通过构建这个图像网格。
这个很简单。对于我们来说，我们有一个空白区域和一个空白容器……我们将使用一个网格(只是从添加面板拖拽一个网格，我们把它放在容器中-这样我们就可以保持网格和图像包含在我们设计的中心)。
但是现在，让我们添加图像。如我们所知，向我们的网格中添加东西?我们只需点击并拖动它。(我们正在使用图像，但这可能是标题或链接或div块或视频…)
让我们在继续之前编辑我们的网格-让我们把它做成4x4(记住:我们总是可以改变这个)。什么时候结束?让我们停止编辑。
然后继续将图像拖拽进去。但是请注意，就像我们前面提到的，无论我们放开什么位置，内容都是自动放置的。网格的子元素(其中的IMAGES)只是围绕并填充了网格中的可用单元格。(这是自动的。)
事实上，如果我们再进去编辑一下?例如，我们可以改变列的数量。同样，在Excel、数字、谷歌表格或冰块托盘中，删除一列是非常具有破坏性的，会破坏里面的东西。但在这里……我们的图像很好。它们现在只是占用了更少的列(它们自动WRAP)。完事之后，我们就回去。
这里需要注意的是关于SIZE…是这些行(我们网格中每一行的高度)-这是自动大小。由于Grid(以及Container和Section) -由于这些都没有设置高度，一个选项是在我们的Grid上设置高度。让我们选择像800像素，但我们总是可以改变这个以后。
但现在它有点不一致-这些图像有不同的纵横比;它们都对齐到每个单元格的左上角……让我们开始控制它。选中GRID后，让我们看看这里的选项。我们可以对齐…或者证明网格中的任何CHILDREN元素。
现在。特别是对于image，有时设计师希望这样的图像更一致地匹配(具有相同的行高和相同的宽高比)。
一个很好的方法是fit (object fit)。这是百分百的魔法。而且它确实有效(大多数时候)。
现在。在拍摄之前，我们将相同的类预先应用到这些图像中。你可以看出…因为它在每张图片上都写着“我们预先应用的类”。如果我们没有这样做，我们总是可以在以后添加一个类。但我们做到了。
所以。均匀地贴合图像?我们只需要做两件事:(1)我们设置尺寸(我们设置100%宽度…)和100%高度)。(2)我们使用对象匹配。(我们在应用到图像的CLASS上做所有这些)。我们将设置FIT…封面。
就像这样，所有的物体都适合它们的细胞。注意行高是完全相等的。
现在。这个网格现在是如何大小的?让我们回到过去，因为我们一分钟前把高度设置为800像素。如果我们移除网格上的高度会发生什么?它会趋近于0吗?
几乎。事实上，如果你仔细观察，它仍然有GAP(行之间的空间)。但是因为我们将每个图像的高度定义为100%，所以它们只会和ROWS本身一样高。它们没有高度。这就是为什么这一切都崩溃了。所以。如果我们放回一个数字?(如果我们给网格一个高度?)它相应地大小。
当然，蓝色属性标签变成蓝色是因为我们在这个类上做了一些更改。而且，正如我们所知道的，AMBER属性标签表明该类上的值来自其他地方。但是粉色标签呢?
让我们选择其中一个图像并SPAN它(我们正在抓取角…点击和拖动…跨度)。所以它不是网格中的一个单元格，而是跨越多个单元格。我们可以在样式面板中看到:我们看到它跨出了多少列和多少行。这些信息存储在ELEMENT中。这就是粉色标签的意思-这并不适用于我们之前预应用的整个类，称为“class we pre-applied”-它只影响SELECTED元素。
这是使用图像网格的自动定位。手动定位和重叠呢?让我们先创建英雄部分。但是为了达到这个目的，让我们先把我们的英雄部分并排放在一起(我们一会儿会讨论为什么)。
为此，我们只需拖入一个Section元素(将其直接拖入页面主体)。我们将设置一个高度(让我们设置最小高度为70vh -这样它是视口高度的70%)。
我们要做的就是让它肩并肩?只需设置Section…网格。(两列…现在我们可以并排建造了。)
让我们从左边的图像开始。让我们转到Assets面板，将我们想要的图像拖到左侧(将其直接拖到Grid部分)。默认情况下(如我们所知)，它会进入FIRST可用单元格(左上角)。我们希望图像占用所有可用空间。
幸运的是，我们刚刚温习了物体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块本身，并确保它被设置为垂直，我们可以混乱我们的对齐或调整控件，使其工作方式我们想要它工作)。
如果我们再次选择网格，然后点击编辑?我们可以调整甚至删除间隙(只需将那里的间隙设置为零)-所以现在它与图像是真正的50/50分割。右边的内容呢?我们可以使用我们的Div块(顺便说一下，让我们将其命名为“英雄内容”以保持内容的组织性)。
但是等一下。这部分被称为手动位置。到目前为止……所有东西都使用AUTO定位。(我们已经覆盖了跨度，但我们还没有在这个布局中使用MANUAL位置)。所以。我们的目标是什么?我们的目标……就是让我们的英雄内容在右下角的单元格上。我们怎么做呢?
嗯…我们刚刚将左边的图像设置为手动位置…我们将div块的右侧设置为手动位置。现在呢?我们可以选择和SPAN我们的图像，以占用所有四个单元格。如果我们想要神奇的flex 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.
但重要的是。这个布局吗?这是课程的一部分。事实上，我们可以将这个类重命名为“Example layout”(还有更聪明的选项)…我们可以把它应用到另一个元素上。所以让我们在这个下面添加另一个部分(当然，你可以将它添加到项目中的任何页面)。我们注意到了什么?嗯，还没有。我们必须应用Example布局类。
但是现在我们注意到了什么?它的布局不只是遵循相同的规则，而且……它是空白的。那么如果我们添加其他东西到这个布局呢?(这些都是div块，里面有一些东西-再说一次，我们使用的是普通的旧div块，我们有时称之为“神奇的”，作为小容器-我们放在网格单元格中的容器。)如果我们编辑网格会发生什么?它是独一无二的吗?不。因为这是一个可重用的布局，我们可以定义我们的区域，甚至在事后重新定义我们的区域。整个项目的布局都在变化。
说得更实际些?我们可以使用区域来定义整个布局。这意味着任何一个区域的变化都会影响到所有使用该类的网格。但那是网格模板区域。
让我们结束关于响应式设计的讨论。网格默认是响应式的。因为每一列的宽度通常用FRs来调整，它通常会尊重这些比例和里面的内容。随着浏览器变得越来越窄，一切都将相应地扩展。
但是如果你想在另一个视图中改变一些东西呢?想要针对不同的设备进行设计?我们可以做出改变。即使我们改变列的数量，网格子设置为自动?(如果网格的子节点是自动定位的?)它们会像你期望的那样响应包装。回到桌面?一切都一如既往。
这是因为更改从基本断点向下级联，这意味着当你在桌面上更改内容时，会影响平板电脑和移动设备的视图。你在平板电脑上添加或改变的东西也会影响移动设备。(这里有一个规律。)移动景观变化影响移动人像。当我们沿着不同的视图向下走时，变化只影响较小的设备。
你会注意到，如果你有MANUAL?(如果某些东西被设置为手动位置?)如果你不告诉它你想让它做什么，例如，一个更小的断点，它就会陷入这种方式。即使您删除了一个列，如果某些东西是手动放置在那里，您必须手动将其放置在一个新列中，或者将其位置设置为自动。
现在。关于手动定位有一件事要注意:如果你在画布上视觉上重新定位一个元素(如果你在网格中移动它)?它对实际的文档顺序没有影响。为什么这很重要?好吧，如果你通过标签或使用屏幕阅读器，如VoiceOver，默认情况下，它将遵循你在NAVIGATOR中看到的顺序(文档顺序)。选择THIS元素后，注意它在导航器中的位置没有改变，即使我们使用手动位置移动它(顺便说一下，这也适用于网格区域)。当你在网格中组织内容时，记住这一点是至关重要的:确保在导航器中设置了ORDER(你希望别人解释你的内容的方式)，然后根据需要进行视觉调整。这不仅是合乎逻辑的、正确的、有效的，而且是朝着开发更容易访问的网站的正确方向迈出的一步。
以上是对CSS网格响应式设计的概述。
所以。我们的两大收获:(1)网格作为指南(删除一行或列并不会删除里面的内容)。(2)网格单元通常一次只存储一件东西。所以在单元格中放入DIV BLOCK可以解锁SUPERPOWERS…让我们把其他东西放到Div块里。
所以。让我们快速回顾一下Grid。我们可以像添加其他元素一样添加网格。我们可以在网格中放置东西，它们会自动放置。它们会填满空间……当然，除非你将某些东西设置为手动，在这种情况下，你可以让那个孩子做任何你想做的事情。像父母。其实根本不是。
我们可以跨越和重叠。我们可以创建可重用的布局，当我们把这个类应用到其他东西上时，那个布局就会延续。我们还可以进行响应式设计(采用网格布局，这可能在桌面上工作得很好，但可能会在较小的视图中删除一些列)。
现在。这方面我们还会讲到很多。比如自动适配，网格中的密集设置，设计更大的断点，何时使用flexbox和何时使用GRID——所有这些都在Webflow University上。如果你还没看过的话，去看看吧。
但这只是对网格的概述……Webflow。
