subgrid 如何传参_CSS Subgrid：功能，语法以及它将解决的问题

最新推荐文章于 2023-06-04 22:15:25 发布

daique1908

最新推荐文章于 2023-06-04 22:15:25 发布

阅读量826

点赞数

文章标签： css html vue python html5 ViewUI

subgrid 如何传参

CSS子网格正在逐步进入浏览器。 CSS工作组正在积极地进行工作，并且相关的W3C规范已经达到了Level2。这一新功能将使我们能够使用继承自其父网格的网格轨迹并与之无缝对齐的子网格来增强网格项。

由于浏览器尚未实现 CSS subgrid，因此本文仅简要概述了即将推出的功能。 Subgrid可能很快将由Firefox Nightly实施，您可以在其中进行试验。请注意，规格尚未最终确定，因此功能将来仍会更改。

CSS子网格解决的问题：继承

只有网格容器的直接子级才成为CSS网格布局的一部分。网格项的子级不会继承网格布局。而不是display: grid ，它们的默认display属性将是block或inline ，这取决于它们是block还是inline元素。

不属于网格的孙元素确实具有多个优点。例如，他们可以自由地实现另一个布局模块，例如flexbox或具有不同对齐规则的自己独立的网格。

但是，在许多情况下，您可能想要创建一个子网格，该子网格从父网格继承行，列和行。使用CSS工作组的更精确的措词：

“ ...子网格轴是将其网格线与元素父网格中的线匹配的轴...”

和

“ ...通过与父网格的这种集成来得出其轨迹的大小。”

目前，我们只能使用嵌套网格来模仿类似于子网格的行为。但是，尽管即将到来CSS子网格将与其父网格具有相同的网格轨迹，但当前可用的嵌套网格却并非如此。

让我们看一个示例，以更好地了解嵌套网格和CSS子网格之间的区别。

1.嵌套网格

这是一个非常简单的嵌套网格：

<div class="grid">
  <div class="nested-grid">
    <div class="item"></div>
  </div>
</div>

外部.grid容器有五列三行。我将其高度设置为300px，以便我也可以将分数单位用于网格行：

.grid {
  background-color: deepskyblue;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

嵌套网格占据三列（在网格列线2和5之间）和两行（在网格行线1和3之间）。它还从外部网格继承了grid-template-columns和grid-template-rows ：

.nested-grid {
  background-color: mediumblue;
  grid-column: 2 / 5;
  grid-row: 1 / 3;
  display: inherit;       
  grid-template-columns: inherit;
  grid-template-rows: inherit;
}

嵌套网格内的项目占据一列（网格第2行和第3行之间）和两行（网格第1行和第3行之间；该规则继承自.nested-grid ）：

.item {
  background-color: black;
  grid-column: 2 / 3;
  grid-row: inherit;  
}

现在，如果您在浏览器的开发人员工具中打开网格检查器，您将立即看到该问题。即使嵌套网格从父网格继承行和列的大小，但两个网格的轨迹仍然彼此独立：

父网格具有五个等宽列和三个等高行：

嵌套网格还具有五个等宽列和三个等高行，但是它们完全独立于父网格的行和列：

除此之外， .item元素使用内部网格的轨迹，而不是外部网格的轨迹。

使用CSS subgrid，我们将能够获得不同的结果。子网格将在其跨越的区域内使用父网格的轨迹，因此两个网格仅使用一组轨迹。

2.子网格模拟（仍然使用嵌套网格）

由于浏览器尚未实现CSS子网格，因此我创建了一个子网格仿真，该仿真使用当前可用的语法来实现与即将到来的子网格类似（但不完全相同）的行为。

但是，模拟和实际子网格之间存在重要区别。尽管模拟创建的内部网格看起来与父网格具有相同的网格轨迹，但它们仍然是两个彼此不绑定的独立网格。

例如，如果较大的项目溢出了模拟子网格内的行或列，则所属的网格线将远离其原始位置。还可以看到，模拟子网格完全独立于父网格，因为它们不会一起移动（就像真正的子网格一样）。

模拟子网格的标记与之前相同：

<div class="grid">
  <div class="subgrid">
    <div class="item"></div>
  </div>
</div>

属于父网格CSS也相同，但是我创建了--gridheight变量，以便以后可以计算内部网格的轨道尺寸：

:root {
--gridheight: 300px;
}
.grid {
  background-color: deepskyblue;
  height: var(--gridheight);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

子网格跨度与以前相同，由grid-column: 2 / 5;定义grid-column: 2 / 5; 和grid-row: 1 / 3; 规则。

grid-template-columns属性定义了三列而不是五列，因为我们希望将子网格的列恰好放置在父网格的列上。

grid-template-rows属性具有一些非常丑陋的calc()规则，该规则可模拟父网格的行的放置。首先，我们计算--gridheight三分之二，因为子网格仅跨越两行而不是三行（由grid-row规则定义）。然后，将其进一步除以2，因为应该将子网格划分为两个等高行。

.subgrid {
  background-color: mediumblue;
  grid-column: 2 / 5;
  grid-row: 1 / 3;  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, calc((var(--gridheight) * 2 / 3) / 2));
}

对于.item元素，我们使用与以前相同的规则，以便我们可以比较覆盖区域的变化方式：

.item {
  background-color: black;
  grid-column: 2 / 3;
  grid-row: inherit; 
}

而且，成功！网格检查器显示模拟的子网格具有与父网格完全相同的网格线：

子网格模拟网格轨迹

父网格仍然像以前一样具有五个等宽列和三个等高行：

但是现在，内部网格线与父网格线相同：

.item元素的形状也已更改。由于内部网格现在只有两行， .item跨越了子网格的整个高度，因为它已定义为覆盖第1行和第3行之间的两行（ grid-row: 1 / 3; ）。

您可能已经注意到，内部和外部网格使用不同的行号。即将到来的子网格也将以相同的方式计算网格线。它将开始从其范围内的数字1开始计算自己的网格线。结果，我们不必追溯父网格的行号，因此将项目放置在子网格上会更容易。

CSS子网格语法

二维子网格

二维子网格继承父网格的行和列。因此，我们需要将subgrid值分配给grid-template-columns和grid-template-rows属性。这就是上面的代码使用新的subgrid语法的样子：

.subgrid {
  background-color: mediumblue;
  grid-column: 2 / 5;
  grid-row: 1 / 3;  
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

新语法将为我们节省大量时间，因为我们不必计算grid-template-columns和grid-template-rows 。此外，子网格将绑定到父网格，因为它们将使用相同的网格轨迹。因此，如果我们向父网格或子网格添加更大的元素，则它们的轨迹将一起增长。

一维子网格

CSS子网格的最佳功能可能是我们不必在二维中使用它，但我们也可以创建仅列和仅行子网格。

1.仅列子网格

仅列子网格仅继承父网格的列，但行是独立定义的。因此，我们只需要将subgrid值分配给grid-template-columns属性。例如：

.subgrid {
  background-color: mediumblue;
  grid-column: 2 / 5;
  grid-row: 1 / 3;  
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 1fr 2fr 3fr;
}

子网格的列使用父网格的轨迹和网格线，而行则作为单独的实体。

2.仅行子网格

同样，仅行子网格仅继承父网格的行，而列则单独定义。在这种情况下，我们只需要在grid-template-rows属性上使用subgrid值。例如：

.subgrid {
  background-color: mediumblue;
  grid-column: 2 / 5;
  grid-row: 1 / 3;  
  display: grid;
  grid-template-columns: 3fr 2fr 1fr;
  grid-template-rows: subgrid;
}

可以使用一维子网格将使CSS子网格变得相当灵活，我们可以期望在将来看到很多有趣的用例。

CSS Subgrid的功能

CSS subgrid具有多种功能，您可以在Grid Layout Module的Level 2文档中进行浏览。为了节省您的时间，以下是CSS子网格的最重要功能（请记住，它们将来可能还会更改）：

CSS子网格...

继承父网格的命名网格线，
继承父网格的命名网格区域，
继承父网格的间隙，
可以定义自己的命名网格线，这些网格线将添加到父级的命名网格线，
可以定义自己的命名网格区域，该区域将添加到父级的命名网格区域，
可以覆盖继承的差距，
开始从1开始计算行号（如上所述）。

结论

CSS subgrid仍在开发中，但是我们可以期望它会在不久的将来被浏览器的预发布版本采用。这项要求很高的新功能将允许网格项的子项从其祖父母那里继承二维（行和列）或一维（行或列）的网格布局。

尽管尚未充分探索CSS子网格的用例，但这里有两篇很棒的文章，您可以在其中找到可以解决的实际布局问题：

翻译自: https://webdesign.tutsplus.com/articles/css-subgrid-features-syntax-and-the-problem-itll-solve--cms-33038

subgrid 如何传参

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
subgrid 如何传参_CSS Subgrid：功能，语法以及它将解决的问题

CSS子网格正在逐步进入浏览器。 CSS工作组正在积极地进行这项工作，并且相关的W3C规范已经达到了Level2。此新功能将使我们能够使用继承自其父网格的网格轨迹并与之无缝对齐的子网格来增强网格项。由于浏览器尚未实现 CSS subgrid，因此本文仅简要概述了即将推出的功能。 Subgrid可能很快将由Firefox Nightly实施，您可以在其中进行试验。请注意，规格尚未最终确定...
复制链接

扫一扫