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