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