内容
- 01. minmax（）函数
- 02.自动填充和自动调整
- 03.密集包装模式
- 04.魔术线和魔术区
- 05.默认对齐
- 06.后备
- 07.最小内容和最大内容的大小调整
- 2级功能
- 08.差距正在改变
- 09.网格不是砖石
- 10.网格区域伪元素
CSS Grid Layout于2017年3月在浏览器中启动，在撰写本文时，大多数站点中超过70％的访问者将获得Grid支持。该数字正在迅速增长，并且随着Edge交付更新的支持而不断改善。
希望您已经有机会探索CSS Grid Layout的某些功能。本文将介绍您可能错过的一些功能。我还将研究在规范的未来版本中可能会出现的一些情况。
01. minmax（）函数
与其他布局方法不同，我们需要在项目本身上设置大小，而在“网格布局”中，我们在容器级别设置大小。我们定义了轨道，这些轨道创建了可放置内容的网格单元。
为了以灵活的方式做到这一点，允许内容可能小于或大于设计预期，Grid为CSS带来了新功能。其中之一是 minmax（） 功能。此功能意味着您可以为轨道指定最小和最大大小。
在下面的示例中，我有一个整洁的面板，其标题位于左上角，而右侧则有一个大图像。无论标题或任何其他内容可能需要多少行，我都希望最上面一行至少为150像素高。
但是，如果有更多的内容行或文本大小较大，则我希望该框大于150像素。这是我用的地方 minmax（），请将最小尺寸设置为150像素，将最大尺寸设置为自动。
.grid {display：grid; grid-template-columns：1.2fr 1fr; grid-template-rows：minmax（150px，auto）minmax（300px，auto）; }
通过使用 minmax（），如果我们仅在该方框中有标题，则该方框比所需空间高。如果标题较长且带有其他文本，则它将扩展以腾出空间。
02.自动填充和自动调整
Flexbox启用了许多响应式设计模式，而无需我们依靠媒体查询。网格又向前迈进了一步，实现了灵活的设计模式，其中项目按二维排列：按行和按列。一个有用的模式是能够有尽可能多的列以适合一个容器，为此，我们使用了两个新的关键字： 自动填充 和 自动适应.
要在容器中容纳多达200个像素的列轨道，请使用以下轨道列表：
.grid1 {display：grid;网格模板列：重复（自动填充，200px）； }
要使这些列灵活但又保持最小200像素，请引入 minmax（） 我在上一个技巧中描述的功能。我们可以创建至少200个像素的列，最大1fr。在确定可以容纳200个像素的列之后，浏览器将在我们的列之间平均分配剩余的空间。
.grid1 {display：grid; grid-template-columns：repeat（自动填充，minmax（200px，自动））; }
我一直在使用 自动填充 这里的关键字；即使没有曲目，这也将保留曲目的空间。相反，如果您使用 自动适应，所有完全空白的轨道将被折叠，并将它们的空间分配给其他轨道。
03.密集包装模式
当你声明 显示：网格 在一个元素上，所有直接子级都成为网格项，并且这些项将开始自动将自己放置在该网格上。这是根据规范中定义的自动放置规则而发生的。
如果您的某些项目跨越了轨道，这意味着有些项目无法容纳在可用轨道中，那么它们将在网格上创建一个新行。默认情况下，Grid会前进并按照项目在源中的显示顺序显示它们。
但是，如果您设置的值 网格自动流 至 稠密，离开这些差距后，网格将开始回溯。如果它找到一个适合于已经存在的空隙的项目，它将拿起它，并将其按原始顺序放入空隙中。
.grid {display：grid;网格自动流：密集；网格模板列：重复（自动填充，最小最大值（200px，1fr））; }
如果要显示的项目没有逻辑顺序，则此行为很有用，但是，如果某人在各个项目之间进行制表，则对于使用键盘进行导航的人来说，您很容易使布局变得非常困难。使用此功能时要格外小心和测试！
04.魔术线和魔术区
当使用“网格模板区域”方法对内容进行布局时，会在网格上创建一个命名区域。反过来，这为使用区域名称的行和列创建了一组命名行 -开始 和 -结尾 附加。在下一个示例中，我使用了通过放置网格区域而创建的命名线来放置叠加层。
.grid {display：grid; grid-template-columns：1fr 2fr 1fr;网格自动行：minmax（100px，auto）;网格模板区域：“ sd1内容sd2”“ sd1页脚sd2”； } .side1 {网格区域：sd1; } .side2 {网格区域：sd2; } .content {网格区域：内容； } .footer {grid-area：footer; } .grid .overlay {grid-column：sd1-start / sd2-end;网格行：content-start / footer-end； }
当您使用命名的网格线时，此操作相反。如果您命名以结尾的行 -开始 和 -结尾 对于列和行，您将创建使用的主要名称的命名区域。
线条定义的区域 内容开始 和 内容端 对于行和列，将具有名称内容。您可以使用 网格区域：内容.
05.默认对齐
当某个项目成为网格项目时，默认行为是在其网格区域上延伸；否则，默认行为是扩展到其网格区域。也就是说，除非该项目是具有固有长宽比的项目。如果该项目具有长宽比，则它将在行和列方向上都与起始行对齐。这意味着默认情况下，Grid不会按比例拉伸图像，尽管您当然可以通过更改对齐方式来这样做。
06.后备
CSS Grid规范中写入了CSS Grid Layout如何覆盖其他布局方法的详细信息。如果您有一个浮动的项目，请使用 显示：表 或者 显示：内联块 然后成为网格项，规范说明了将要发生的情况。
简而言之，当某项变为网格项时，您会发现：
- 如果它是浮动的，或使用clear属性，则这些属性将不再影响该项目。
- 如果有显示： 内联块 或使用表格属性，例如 显示：表格单元 这些不再适用。
- 对于表属性，使用时生成的匿名框 显示：表格单元 没有父表的不再创建。
- 垂直对齐 不再适用。
我创建了一个备忘单，其中详细介绍了这些替代示例。您可以在我的网站上找到它。
尽管在许多情况下都可以使用这种覆盖行为，但是您需要注意在后来变成网格项目的项目上设置的宽度。在以前的布局方法中，我们控制项目在项目上的宽度。
使用网格，我们将项目放置到约束它的网格单元中。这意味着，如果您设置了宽度百分比的项目，则一旦该项目成为网格项目，该宽度将解析为网格面积的百分比。
解决方案是另一个CSS规范：功能查询。我们可以使用功能查询来测试对网格布局的支持。如果浏览器支持Grid，则将宽度设置为auto。
.grid> div {float：left;宽度：33.333％; } @supports（显示：网格）{.grid> div {width：auto; }}
07.最小内容和最大内容的大小调整
CSS内部和外部大小调整模块级别3规范定义了用于大小调整的其他关键字。这些关键字包括 最小含量 和 最大含量，可用于定义网格轨迹中的大小。
作为一个非常简单的示例，我创建了一个两列的轨道网格。一栏定义为 最小含量 大小，第二栏 最大含量。第一条轨道仅与显示单个单词内容所需的大小一样大-这是该轨道可以达到的最小大小。第二个展开以允许显示整个行，您可能会发现这会导致需要管理和处理的溢出。
.grid {display：grid;网格模板列：min-content max-content; }
2级功能
网格规范现在处于候选推荐标准状态，这意味着我们希望不对该规范进行任何重大更改。取而代之的是，它进入一个阶段，在该阶段我们寻找每个功能的至少两个实现。这样可以确保该规范有意义，并且可以由浏览器实现。
但是，Grid仍在发生事情，在本文的其余部分中，我们将了解对Level 1规范的最新更改以及在Level 2中可能需要期待的几件事。
08.差距正在改变
这 网格间隙 速记，加上速记 网格列间隙 和 网格行间隙 属性在2017年8月CSS工作组会议期间更改为 差距, 列间隙 和 行间隙。它们也已被移动以在“框对齐”规范中具有其定义。
该规范采用了Flexbox的出色对齐功能，并进行了扩展，因此它们也可以在Grid中使用，甚至还可以在其他布局方法中使用。
将间隙特征放到“框对齐”规范中并以更通用的方式命名它们意味着它们可以在有意义的其他布局类型中使用。在Flexbox中，它们很有意义。
这种重命名意味着我们最终将在Flexbox中获得适当的差距；不再纠缠于利润。浏览器会将旧名称别名为新名称，因此，如果您已经在Grid Layout中使用了空格，则代码不会中断。但是，您可能还希望自己添加两个属性。浏览器会忽略不支持的浏览器。
09.网格不是砖石
当人们第一次看到我在本文前面演示的密集打包模式时，他们常常认为Grid可以完成Masonry布局模式。但是，砌体是一种完全不同的布局类型。标准的砌体布局并不是严格的网格，因此这种模式介于Flexbox擅长的功能和Grid的功能之间。
但是，在CSS工作组中，我们正在考虑这个问题。我们知道开发人员确实希望能够做到这一点。您可以在GitHub上的CSS WG草稿存储库中找到讨论，甚至也可以添加您的想法。
10.网格区域伪元素
网格布局的另一个常见功能要求是能够对网格单元或区域进行样式设置，而无需插入要设置样式的元素。当前，要将边框添加到区域，您需要在标记中添加一个空元素，或使用生成的内容来创建可设置样式的网格项。
在考虑为网格区域添加某种伪元素时，出现了一个问题。因此，如果您想向特定区域添加背景或边框而不添加一些额外的标记或使用生成的内容，这将给您一些目标。
本文最初出现在第298期 网络杂志，是面向专业Web设计师和开发人员的杂志-提供最新的最新Web趋势，技术和技巧。 在这里购买第298期 或者 在这里订阅网.
喜欢这个吗？阅读这些！
- 使用CSS Grid创建响应式布局
- 赶上CSS Grid
- 编写更好的CSS指南
