css网格_我CSS网格愿望清单

如果您关注此博客，您将知道我是CSS Grid的忠实拥护者，毫无疑问，它使我们开发人员在处理Web布局时比以往任何时候都更有能力。 但是，我CSS布局需求中有一些是Grid尚未完全满足的-希望其中的一些能够在将来实现！

设置行和列间隙的样式

没有任何网格属性可让您直接将样式应用于行和列间隙。 能够在此处应用背景或边框样式等效果非常好。 目前，如果要执行以下示例中的操作，则需要使用网格项目本身的边框，背景或伪元素来绕开它。 您可以在网格上设置背景，并在网格项目上设置纯色-很好，除非您希望项目具有透明的背景并在其中显示内容。

像column-rule属性（来自Multi-Column规范）之类的东西至少是一个开始。

多个间隙值

我遇到过许多情况，能够为column-gap和row-gap属性设置多个值会非常有用。 在我以前的文章中， 用CSS Grid解决棘手的布局问题 ，而不是创建空行，我可以这样做：

.grid{
	row-gap: 0 40px 40px 0 ;
}

自动流量模式

这是一个很大的问题，可能难以实施-但无疑将非常有用。 假设我有一个这样的布局：

在每个偶数行上，两个网格项都位于右侧的单元格中，而每个奇数行都位于左侧。 我允许Grid创建隐式轨道（可以使用grid-auto-rows属性指定），因为我不知道我的网格将包含多少个项目（在处理用户生成的内容时可能就是这种情况） 。

当我们的网格项仅跨越单个行轨道时，使用nth-child相对容易实现。 但是，如果要在二维中放置项目，则会遇到问题。 现在，让我们假设其他所有项目都需要跨越两条轨道，而后续的项目需要向下移动一行才能适应：

现在，当我们尝试使用nth-child时遇到了问题，因为无法告诉Grid将项目相对于前一个放置在行轴上，如以下Codepen示例所示：

演示地址

我希望看到一个类似于grid-template-areas属性的解决方案，其中Grid将“ areas”解释为nth-child -type模式：

.grid{
	grid-template-pattern:
		'. . 1 1 2'
		'. . 1 1 .'
		'1 1 2 . .'
		'1 1 . . .';
}

以下任何内容都会重复此模式。

用fr单位的calc（）

Grid中的fr单位非常有用，但是目前无法与calc()结合使用。 根据规范，这与fr代表弹性值而不是长度有关，因此我想这不太可能很快改变。

我遇到过一种或两种情况，可以在fr单位中使用calc()很有用– Ana Tudor的DRY状态切换技术就是我想到的一种情况。

长宽比网格单元

现在看来，在将来的某个时刻它可能是一种真实的可能性。 已经有关于宽高比CSS属性的提案 ，尽管在非常非常早期的阶段，许多CSS开发人员都迫切期望它。 我希望能够定义网格单元本身而不是子项的长宽比。 （我在这里写了一些有关它的内容，并使用了一些CSS变量的技巧。）

特别提及

子网格

子网格（子网格项可以继承其父网格的项）必须是最需要CSS网格功能之一。 令人高兴的是，这是2级规范 ！

石工

网格仍然不允许我们在CSS中原生创建真正的砌体布局-并非没有以某种方式规定项目的高度。 能够使用CSS做到这一点很棒，但是我并不认为它确实是CSS Grid的一部分。 在我看来，这种布局更像是Grid和flexbox的结合，以及其他一些东西。 我希望有一天我们能够仅使用CSS就能达到目标，但是我认为我们还需要一段时间。

翻译自: https://css-irl.info/my-css-grid-wishlist/