CSS网格布局秘密透露

CSS Grid Layout于2017年3月推出到浏览器中,在撰写本文时,大多数网站的访问者中有超过70%将拥有网格支持。这个数字正在快速增长,并随着Edge提供更新的支持而有所改善。

我希望你已经有机会探索CSS网格布局的一些功能。本文将介绍您可能错过的一些功能。我还将看一下未来规范中可能出现的一些事情。

01. Minmax()函数

与其他布局方法不同,我们需要在项目本身上设置大小,在网格布局中,我们在容器级别设置大小。我们定义创建网格单元格的轨道,可以在其中放置内容。

为了以灵活的方式实现这一点,允许内容可能小于或大于预期的设计,Grid为CSS带来了新功能。其中之一是MINMAX()功能。此功能意味着您可以指定轨道的最小和最大尺寸。

在下面的例子中,我有一个整洁的面板,左上角有一个标题,右边有一个大图像。无论标题或任何其他内容可能需要多少行,我希望顶行至少为150像素高。

但是,如果有更多的内容行或文本大小更大,我希望该框大于150像素。这是我使用的地方MINMAX(),将最小尺寸设置为150像素,最大为auto。

.grid {display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:minmax(150px,auto)minmax(300px,auto); }

By setting a minimum height on a row, we create neatly sized rows in our design, even with shorter content

通过在一行上设置最小高度,我们可以在设计中创建整齐的行,即使内容较短

The minmax() function with a maximum of auto means that content does not overflow if there is more than expected

Minmax()函数的最大值为auto意味着如果超出预期,内容不会溢出

通过使用MINMAX(),如果我们只是在那个方框中有标题,那个方框比所需空间高。如果我们有更长的标题和附加文本,它会扩展以腾出空间。

02.自动填充和自动装配

Flexbox支持许多响应式设计模式,而无需我们依赖媒体查询。网格更进一步,实现灵活的设计模式,项目排列在两个维度:按行和按列。一个有用的模式是能够拥有适合容器的列数,为此我们使用两个新关键字:自动填充自动调整

要容纳到容器中的200个像素列轨道,请使用以下轨道列表:

.grid1 {display:grid; grid-template-columns:repeat(auto-fill,200px); }

为了使这些列灵活,但保持最小200像素,请引入MINMAX()我在上一篇文章中描述的功能。我们可以创建至少200像素,最大为1fr的列。在确定了多少200像素的列后,浏览器会在我们的列之间平均分配剩余空间。

.grid1 {display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,auto)); }

This image demonstrates the difference between auto-fill with fixed-size columns and auto-fill using minmax() to create flexibly sized columns

此图像展示了它们之间的区别自动填充固定大小的列和自动填充运用MINMAX()创建灵活大小的列

我一直在使用自动填充关键字在这里这将为轨道保留空间,即使它们没有内容。相反,如果您使用自动调整,任何完全空的轨道都将折叠,并将其空间分配给其他轨道。

03.密集包装模式

当你申报时显示:网格在一个元素上,所有直接子节点都成为网格项,并且这些项将开始自动将它们放在该网格上。这是基于规范中定义的自动放置规则发生的。

如果某些项目跨越轨道,这意味着有些项目不适合可用轨道,则它们将在网格上创建一个新行。默认情况下,Grid会向前进行并按照它们在源中显示的顺序显示您的项目。

但是,如果设置了值网格自动流稠密,Grid将在离开这些差距后开始回溯。如果它找到一个适合已经离开的间隙的项目,它将拾取它并将其从源顺序放入间隙。

.grid {display:grid;网格自动流动:密集; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

The auto-placement rules will keep grid items in source order by default; this may lead to gaps in the layout

默认情况下,自动放置规则会将网格项保持为源顺序;这可能会导致布局上的差距

Using grid-auto-flow with a value of dense turns on the dense packing mode, which can backfill gaps in the layout

使用密集值的网格自动流动打开密集包装模式,可以回填布局中的间隙

如果您正在显示的项目没有逻辑顺序,则此行为很有用,但是,如果某个人在某个项目之间进行制表,则您可以轻松地使用键盘导航的布局非常困难。谨慎使用此功能并进行测试!

04.魔术线和魔法区

使用网格模板区域布局内容的方法时,可以在网格上创建命名区域。这反过来为使用区域名称的行和列创建一组命名行-开始-结束追加。在下一个示例中,我使用了通过定位网格区域来创建的命名线来定位叠加层。

.grid {display:grid; grid-template-columns:1fr 2fr 1fr; grid-auto-rows:minmax(100px,auto); grid-template-areas:“sd1 content sd2”“sd1 footer sd2”; } .side1 {grid-area:sd1; } .side2 {grid-area:sd2; } .content {grid-area:content; } .footer {grid-area:footer; } .grid .overlay {grid-column:sd1-start / sd2-end; grid-row:content-start / footer-end; }

当您使用命名网格线时,它会反向运行。如果您命名以。结尾的行-开始-结束对于列和行,您将创建使用的主名称的命名区域。

由线条定义的区域内容开始内容结束对于行和列,将具有名称内容。您可以将项目放入该区域网格区域:内容

The overlay has been positioned on top of the grid areas by using named lines created from the area name

通过使用从区域名称创建的命名行,将叠加层定位在网格区域的顶部

05.默认对齐

当项目成为网格项目时,默认行为是在其网格区域上延伸;除非该项目具有固有的宽高比。如果项目具有纵横比,则它将在行和列方向上与起始行对齐。这意味着默认情况下Grid不会将图像拉伸超出比例,但如果您想通过更改对齐行为,当然可以这样做。

06.后备

写入CSS Grid规范是CSS Grid Layout如何覆盖其他布局方法的细节。如果您有一个浮动的项目,请使用显示:表格要么显示:内联块然后成为网格项,规范解释了将要发生的事情。

简而言之,当项目成为网格项目时,您会发现:

  • 如果它浮动,或使用clear属性,这些属性将停止影响该项目。
  • 如果有显示:内联块或使用表属性,如显示:table-cell这些不再适用。
  • 对于表属性,使用时生成的匿名框显示:table-cell不再创建父表。
  • 垂直对齐不再适用。

我创建了一个使用示例详细说明这些覆盖的备忘单。你可以找到在我的网站上。

虽然依赖于这种覆盖行为在许多情况下都会起作用,但您需要注意在以后成为网格项的项目上设置的宽度。在以前的布局方法中,我们控制项目上项目的宽度。

使用Grid,我们将项目放入一个约束它的网格单元格中。这意味着如果您有一个设置了百分比宽度的项目,那么一旦该项目成为网格项目,该宽度将解析为网格区域的百分比。

解决方案是另一个CSS规范:功能查询。我们可以使用功能查询来测试网格布局支持。如果浏览器支持Grid,我将宽度设置为auto。

.grid> div {float:left;宽度:33.333%; } @supports(display:grid){.grid> div {width:auto; }}

07.使用min-content和max-content调整大小

CSS内在和外在大小模块级别3规范定义了用于大小调整的附加关键字。这些关键字包括最小含量MAX-内容,可用于定义网格轨道中的大小。

作为一个非常简单的例子,我创建了一个双列轨道网格。一列定义为最小含量大小,第二列MAX-内容。第一首曲目只有显示内容的单个词所需的大小 - 这是该曲目的最小尺寸。第二个扩展以允许显示整行,您可能会发现导致需要管理和处理的溢出。

.grid {display:grid; grid-template-columns:min-content max-content; }

最小含量列是显示一个单词所需的宽度;该MAX-内容列扩展以适合句子


2级功能

Grid规范现在处于候选推荐状态,这意味着我们希望不对规范做出任何重大更改;相反,它会进入我们寻找每个特征的至少两个实现的阶段。这确保了规范有意义并且可以由浏览器实现。

然而,Grid仍然会发生一些事情,在本文的其余部分中,我们将看到最近对Level 1规范的更改以及我们在Level 2中可能需要期待的一些事情。

08.差距正在发生变化

网格差距速记,加上速记格列隙格列隙在2017年8月CSS工作组会议期间,属性发生了变化间隙柱隙行差距。他们也被转移到Box Alignment规范中定义。

这是从Flexbox获得良好对齐功能并扩展出来的规范,因此它们也可以在Grid中使用 - 也可能在其他布局方法中使用。

将间隙特征放入Box Alignment规范并以更通用的方式命名它们意味着它们可以在其他有意义的布局类型中使用。他们有意义的显而易见的地方是Flexbox。

这种重命名意味着我们最终会在Flexbox中获得适当的差距;没有更多的利润与利润。浏览器会将旧名称别名为新名称,因此如果您已经在网格布局中使用了间隙,则代码不会中断。但是,您可能还想自己添加这两个属性;浏览器忽略了他们不支持的那个。

09.网格不是砌体

当人们第一次看到我在本文前面演示的密集打包模式时,他们通常认为Grid可以做砌体布局模式。然而,砌体是一种完全不同的布局类型。标准的砌体布局不是严格的网格,使得这种模式介于Flexbox擅长和Grid之间。

但是,在CSS工作组,我们正在考虑这个问题。这是我们知道开发人员真正希望能够做到的事情。你可以在中找到讨论CSS WG草稿库在GitHub上,甚至还添加你的想法。

10.网格区域伪元素

Grid Layout的另一个常见功能请求是能够为网格单元格或区域设置样式,而无需将元素插入样式。目前,要向区域添加边框,您需要在标记中添加空元素,或使用生成的内容创建可以设置样式的网格项。

一个问题在考虑为网格区域添加某种伪元素时提出的。如果您想在不添加额外标记或使用生成的内容的情况下向特定区域添加背景或边框,则可以为您提供目标。

本文最初出现在第298期网络杂志,专业网页设计师和开发人员杂志 - 提供最新的网络趋势,技术和技术。在这里购买第298期要么在这里订阅网络

喜欢这个?阅读这些!



翻译字数超限