问题标签 [css-grid]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 具有 flexbox 布局的大型第一项？
我有一个布局，由一个包含一堆项目的有序列表组成。
所有项目都具有一致的宽度和高度 - 除了第一个项目 - 宽 (3x) 和高 (2x)。它看起来像这样：
Codepen Demo（调整视口大小以查看效果）
目前，我使用浮动和内联块来实现布局，但我想使用 flexbox，因为 flexbox 提供了一些额外的功能。
我做了几次尝试，但没有成功 -
尝试 #1 - Codepen
尝试 #2 - Codepen
在列表前使用浮点数以确保第一个大列表项的空间
然后在第一个列表项上设置绝对显示。
在这两次尝试中，第一行中的红色框都会拉伸以填充第一项的高度。
这可能吗？
（如果没有，那么我会对 CSS 网格解决方法感兴趣）
html - flexbox/网格布局中的最后一个边距/填充折叠
我有一个项目列表，我试图用 flexbox 将它们排列成可滚动的水平布局。
容器中的每个项目都有一个左右边距，但最后一个项目的右边距正在折叠。
有没有办法阻止这种情况的发生，或者一个好的解决方法？
php - Flex / Grid 属性在 gmail 电子邮件中被删除
我有一个 PHP 脚本，它通过邮件发送以下 HTML：
但是收到的电子邮件（当我检查主 div 时）没有显示该属性flex-direction: column;
似乎 gmail 过滤了这些属性？
这是正常的吗？
css - CSS Grid Layout Module Level 1 - 从候选推荐到最终规范通常需要多长时间？
W3C 候选推荐标准于 2016 年 9 月 29 日发布。
https://www.w3.org/TR/css-grid-1/
由于 Chrome/Firefox/IE 已经实现了该功能（或多或少完整且落后于功能标志），W3C 的最终规范将大致是这些浏览器的发布日期。
基于通常的 W3C 流程，尤其是该工作组的进展——有人可以估计或粗略猜测最终规范何时发布吗？
css - 在重复（）函数中使用自动填充值在 Firefox 中不起作用？
我正在尝试学习 css-grid 布局。我已经打开了 Chrome、FireFox 和 FireFox Developer 的网格标志。我还每晚下载了 FireFox（截至今天 52.0a1 (2016-11-07)（64 位））。我在 Mac 上。
我的计划是我想使用该auto-fill功能来确保偶数列。所以我这样做了：
invalid property value在 Chrome 中有效，但在所有 FF 中，我在调试器中看到一个错误。
我正在查看Rachel Andrew 的这个网格示例，在第三个示例中，她展示了使用固定数量的重复模式：
我尝试将重复计数更改为数字，它适用于我的所有浏览器。但auto-fill似乎只适用于 Chrome。我知道标准还没有发布，但它应该是这样的吗？
是否有其他技术可以确保将偶数列放入空间中？
css - Grid Layout 中的 align-items 与 align-content 有什么区别？
我已经阅读了 Grid 的完整指南，但仍然对两组容器属性之间的差异感到困惑，即“ justify/align-items”与“ justify/align-content”。
我的困惑围绕着作者提出的“ -content”集合存在的说法，因为
有时网格的总大小可能小于其网格容器的大小
-content我认为这适用于两者，而不是“ ”集独有的。
有人可以帮忙解释一下吗？最好使用一些图形说明作为示例。
javascript - CSS网格布局-如何使用javascript计算鼠标所在的网格单元格？
“css 网格布局” = https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
有谁知道一种 javascript 方法来计算鼠标当前所在的列/行？
我猜这样的事情是获取鼠标所在单元格的开始，但这仅对相同大小的网格有用。
有没有办法用不相等的细胞来做到这一点？
更新 1 - 添加代码笔
这是一个代码笔，它显示了 3 个不同百分比的列宽 ( grid-template-columns: 25% 50% 25%;)、2 行、一个没有元素的网格单元和一个跨越多行的元素： http: //codepen.io/anon/pen/NbeOXp
更新 2 - 尝试计算鼠标所在的网格单元格。
在这里，我向网格中的每个单元格添加了隐藏元素，以检测鼠标所在的单元格。但是它只返回它所在的当前元素的“自动”。向网格 IMO 添加额外的隐藏元素也很笨拙.
http://codepen.io/anon/pen/gLZBZw提示：使用鼠标悬停在网格上。
html - CSS 网格布局中的 minmax()
我面临minmax()与 CSS 网格布局相关的功能的一些问题。
这是我的代码：
当我使用我的 CSS 中提到minmax()的fr单位时，网格轨道的宽度获得最大值，并且即使我减小视口也保持在最大尺寸；px但是当我如下使用它时
它按预期工作，我不知道为什么。
测试：Chrome 和 Firefox
css - 占用可用水平空间的网格项
我有一个包含 16 个网格项的网格。
我希望第一行占用 4 个网格项，第二行 3，第三行 2 和第四行 7。我希望它们中的每一个都均匀分布，以便它们占据所有可用空间。
我可以在一定程度上通过在 中指定一个数字grid-template-columns，即 12，并grid-column-end: span-*在网格项目上使用来实现这一点。但是，这对于我希望 7 个项目均匀分布的行来说是不够的。
使用网格项目的预期行为grid-column-end（除了最后一行有 7 个项目，其最后一项强制自己进入未在 中指定的行grid-template-columns）：
上面的代码片段：
我解决这个问题的想法是auto-fill在grid-template-columns属性中使用，但不解决单独的行。
自动填充行为：
CSS Grid 可以实现这样的行为吗？
html - 显示：网格 - 百分比与分数
我试图了解我应该如何使用display: grid.
这是我的例子：
https://jsfiddle.net/Lycuuu95/
乍一看，它看起来不错。但是，如果您仔细观察，您会发现一些问题。“内容”在“包装”之外，到屏幕边缘的距离也有点不同。
它可以非常简单地修复：
但我仍然想知道这是唯一正确的方法还是我可以以某种方式使用百分比，而不会出现上述问题？我已经尝试过使用box-sizing: border-box，但它并没有解决问题。
笔记：
display: grid目前在稳定版本的浏览器中不能开箱即用。
（见http://caniuse.com/#feat=css-grid）
可以使用以下快速指令启用它：
https://igalia.github.io/css-grid-layout/enable.html
此外，在 Chrome Canary 中，它开箱即用。