问题标签 [css-grid]

在我当前的项目中，可容忍的加载时间存在性能限制，并且测试部署表明延迟非常重要，足以让我研究代码优化。

在研究 CSS flexbox 的性能时，我的理解是它比旧的 flexbox 实现和 CSS 表（Source）都快。比较 flexbox 和新出现的 CSS Grid ( Source ) 时，grid 在 2D 布局中表现更好，这是意料之中的，因为它是为此而设计的，而 flex 是为 1D 布局而设计的。

然而，当涉及到 1D 布局时，grid 在使用 CSS flex 时的性能优于后者align-items: stretch（该属性的默认值）。但是，当stretch不使用时，flex 表现更好。

所以这就是问题所在：拉伸对齐很有用，但对性能有很大影响（这对我来说很重要，因为我的项目系统大量使用 iframe 和每个框架内的嵌套弹性框）。因此，如果我不使用拉伸并将其替换为其他替代方法（例如width: 100%或height: 100%取决于弯曲方向）对于尚未在没有拉伸的情况下填充整个空间的特定元素，它会因此提高性能吗？

I'm working with CSS Grid and facing a problem with grid element which has height of 1fr and overflow-y: hidden.

It is <ul>, which has a big <li> number and must be scrollable.

In FF and Chrome everything works well, but Safari did not cut the list and did not add scroll. Similar problem in Edge.

Parent block:

Child #1

Child#2

Here the second child is the target element, which must be scrollable.

我希望我的网格像这样垂直填充：

相反，它像这样水平填充：

我想指定网格中的列数，而不是行数。

这就是我的 div 使用内联 CSS 样式的样子：

重要的是我的网格是 3 列宽，但我希望按列而不是按行填充项目。这在 CSS Grid 中可行吗？我已经阅读了这个https://css-tricks.com/snippets/css/complete-guide-grid/但没有看到任何关于订单的信息。

CSS Flexbox 有flex-direction，CSS Grid 没有类似的属性吗？

需要：一个 CSS 唯一的解决方案，可以在每行的基础上启用等高网格“部分”，这也是响应式的。

该图有望比本文中的文字更好地解释要求：

“项目网格”应该是响应式的——因为它可以根据视口宽度在每行显示不同数量的卡片。在给定的行内，等效部分应该在“每行”的基础上具有相同的高度。

在下面的 HTML 和 CSS 中 - 项目卡被分成我们需要的行（在桌面和移动的两个示例断点处），但内容部分的高度是可变的（恶心）：

下面的 codepen 是一个基于 JavaScript 的解决方案，可以实现预期的结果 - 但这是我试图避免的： https ://codepen.io/rusta/pen/KmbVKd

限制

• 网格列表中要显示的项目数可以是 1-150 之间的任意数字
• 要显示的项目内容的大小将是真正可变的（因此不能选择“合理的”最小高度）

我希望新的 CSS Grid 系统能帮助我实现上述目标，但是玩了一段时间后，它似乎需要比我希望的更多的结构，而且响应方面似乎相当具有挑战性。但也许某处有一个基于 CSS Grid 的答案

进一步说明：我说的是纯 CSS 解决方案，我的意思是非 JS 解决方案。如果 HTML 块需要更改（订单/嵌套/类名）以支持非 JS 解决方案，这绝对没问题

在这个简单的例子中——我们只关注具有“匹配高度”的“内容”部分——因为我们可以假设标题和价格部分自然是相同的高度。在任何匹配的网格部分（标题/内容/价格/其他）上启用“等效性”会很好，但这可能是另一天......

需要：一个仅 CSS 的解决方案，可以在每行的基础上启用多个等高网格“部分”，这也是响应式的。

注意：这是这个问题的后续问题，每个项目只有一个“等高”部分 - 这可以通过 flexbox 实现

下图应该有助于解释要求：

“项目网格”应该是响应式的 - 因为它可以根据视口宽度显示每行不同数量的卡片（桌面上 4 个，移动设备上 2 个）。在给定的行内，等效的“内容”和“功能”部分应该具有相同的高度。

在下面的 HTML 和 CSS 中 - 项目卡被分成我们需要的行（在桌面和移动的两个示例断点处），但内容部分的高度是可变的：

我创建了以下 codepen 作为基于 JavaScript 的解决方案，实现了预期的结果 - 但如果可能的话，我希望用 CSS 解决方案替换它：http: //codepen.io/rusta/pen/xdmdxm

限制

• 网格列表中要显示的项目数可以是 1-n 中的任意数字
• 要显示的“内容”和“功能”部分的大小将是真正可变的（因此不能选择“合理的”最小高度）

基于 Flexbox 的解决方案似乎无法应对项目有多个需要对齐的部分这一事实

我希望新的 CSS Grid 系统能够帮助实现上述目标，但我在这方面做了几次尝试，但都没有成功，所以我打开社区看看我是否遗漏了什么

进一步说明：我说的是纯 CSS 解决方案，我的意思是非 JS 解决方案。如果 HTML 块需要更改（订单/嵌套/类名）以支持非 JS 解决方案，这是一个可行的选择

<dl>这是我尝试使用and创建伪表display: grid。

实际上，它有效。唯一的问题是我被迫使用丑陋的方式来定义行。这是完全手动的方式。dt + dd + ... + dd因此，如果我在表中有 30 行，那么对它们中的每一行重复将非常愚蠢。

如何解决这个问题？

（我不想使用真正的表格，因为它是用于 Markdown 的）。

是否可以制作像这样的纯 CSS 解决方案：

1. 物品有一些min-width。
2. 它们应该动态增长以填充所有容器宽度，然后换行
3. 列表中的所有项目应具有相同的宽度。

这是它现在的样子：

这也是我希望它看起来的样子（我已经手动管理了这些底部项目的宽度，只是为了显示预期的结果）：

这是一个小提琴演示。

我有一个带有一堆自动流动网格项目的 CSS 网格。有时网格项目是一个 1 x 1 轨道，有时它们是 2 x 2 轨道，所以我从源顺序不知道哪些项目将在网格中的某些位置。这意味着样式与:nth-child()将不可靠。

我想为某些网格列（主要是最后一列）中的项目添加样式。是否有一个 CSS 选择器可以让我设置这些项目的样式？

例如，在这个演示中，我将如何设置框 3、5 和 9 的样式（此处为 codepen）？

编辑：代码最终会出现在 CMS 中，并且将来可能会发生变化。

grid-template-rows每当您将鼠标悬停在具有overflow并将位置auto height移动scroll到溢出容器底部的任何元素上时（body在这种情况下），这是预期的行为吗？

最明显的滚动中断效果是当您在 2 个li元素之间做圆圈并尝试在片段 #1 上向上或向下滚动时。

当我移除:hover滚动条时li不会中断。

另一方面，如果您将中间值硬编码为 ie40vh而不是autoscroll 按预期工作。

我正在试验，display: grid;但不明白如何grid-row-align工作grid-column-align。一些文档指出（编辑：这个链接现在已经消失了，可能是在我发表了指向下面 Michael_B 答案的评论之后）

该grid-row-align属性定义行内的垂直对齐方式，同时grid-column-align定义列内的水平对齐方式。

我的理解是，这是一个必须在受影响元素的容器中设置的属性（但我也尝试将其放入元素本身的规则中）。具体来说，我希望在下面的代码中，单词hello将在他的框中水平和垂直居中。

这些属性的正确用法是什么？

注意：我使用的是 Chrome 58，根据兼容性矩阵可以。