问题标签 [css-grid]

我正在 codepen.io 中试验新的CSS网格布局系统。它有一个有趣的功能，称为命名网格线，允许为列和行之间的网格线定义自定义名称。不幸的是，我似乎无法使该功能正常工作，因为 SCSS 不认可该语法。[line-name]

上面的代码应该创建一个 CSS 网格，它的侧面有两个 100px 宽的列，其中一个列在中心填充元素的其余宽度。这部分工作正常。然后我尝试给网格线自定义名称并将.one元素放在中间列，但 Codepen 的 SCSS 预处理器（以及我尝试过的所有其他编译器）拒绝编译整个东西，说Invalid CSS after "...plate-columns: ": expected expression (e.g. 1px, bold), was "[main-start] 10..."

有什么方法可以强制 SCSS 在不解析的情况下按原样编译这种样式（或以另一种编译方式表达），还是我必须用常规 CSS 重写我的实验？

我正在尝试使用 CSS 网格实现一个实验性的 12 列网格系统。我希望将网格外的边距保持为单独的列，以便我可以将边缘列的内容渗入其中，这是众所周知的使用传统网格系统难以实现的功能。

我的问题是 CSS 网格的自动放置想要将内容放置在边距列中。我的第一个想法是为跨越网格所有行的网格边距创建伪元素，但grid-row-end: -1仅适用于显式网格行，而不适用于自动创建的行。

有没有办法让网格单元跨越隐式网格中的所有行，或者防止自动放置使用边缘列？

注意：该片段仅适用于最新版本的 Chrome、FF 和 Safari。

有了 Chrome、Firefox 和 Safari 技术预览版中的 CSS 网格支持，有没有人找到一个不错的 CSS 网格生成器或配置器？

有点像这里的 flexbox 生成器：http: //the-echoplex.net/flexyboxes/

我知道有类似的问题，但这是专门询问如何使用 CSS 网格布局来做到这一点。

所以我们有这个基本的网格设置：

HTML（带侧边栏）：

CSS：

要创建一个看起来像这样的布局：

如果页面没有侧边栏，即。html 看起来像这样，但使用相同的 CSS：

HTML（无侧边栏）：

页面布局如下所示（破折号表示空白）

我知道为什么会这样，网格列仍然在grid-template-columns规则中定义。

flex-grow我只是想知道如何告诉网格如果没有内容，则填充剩余空间，类似于flexbox.

如果没有侧边栏，所需的结果将如下所示。

TL;DR：有没有类似table-layout: fixedCSS 网格的东西？

我试图创建一个年视图日历，其中月份有一个大的 4x3 网格，其中嵌套了 7x6 网格。

日历应该填满页面，因此年网格容器的宽度和高度各为 100%。

这是一个工作示例：https ://codepen.io/loilo/full/ryXLpO/

为简单起见，该笔中的每个月都有 31 天，从星期一开始。

我还选择了一个小得离谱的字体来演示这个问题：

网格项目（= 日单元格）非常紧凑，因为页面上有数百个。一旦日期数字标签变得太大（随意使用左上角的按钮在笔中调整字体大小），网格的大小就会增长并超过页面的主体大小。

有什么办法可以防止这种行为？

我最初宣布我的年份网格的宽度和高度为 100%，所以这可能是开始的点，但我找不到任何符合该需求的与网格相关的 CSS 属性。

免责声明：我知道有一些非常简单的方法可以在不使用 CSS 网格布局的情况下设置日历样式。但是，这个问题更多的是关于该主题的一般知识，而不是解决具体示例。

我正在尝试创建一个将替换本机 Android 应用程序的 Web 应用程序 - 因此它可以在 iOS/Mac/Windows/Ubuntu 上运行！

我从 Flexbox 开始——但在浏览器实现中存在太多错误和不兼容性。所以我正在使用新引入的 CSS Grid，它看起来更强大，更适合 App 布局。

布局是：顶部的应用栏，以及一个标签栏，可让您在多个视图之间切换 - 每个视图都是自己的 CSS 网格 - 具有灵活和固定的内容。

我无法让内部元素在高度上弯曲并获得屏幕上的所有可用空间，并且不会被截断或落在视口之外，因此应用程序应该包含在视口中，并且绝对不会在主屏幕外滚动/溢出。

我如何实现这一目标？你如何指定一行来填充屏幕的可用高度而不是更多？

JS Fiddle 在这里： https ://jsfiddle.net/femski/5wpkvdo2/30/

我第一次使用CSS 网格布局，它们很棒。然而，现在，我无法控制我的一个网格单元。

我想要的是有一个元素占用现有的可用空间而不是更多，当内容变得太大时滚动。我的理解是，在1fr计算完其他所有内容后，网格大小会占用统一数量的可用空间。我尝试了各种尺寸，例如minmax(auto, 1fr)但无济于事 -1fr似乎扩展以适应我不想要的内容。设置最大尺寸大小100px也不好，因为我希望大小由网格中的其他元素确定。

这是示例：

我可以使用什么网格声明（如果有）让“问题孩子”在溢出时滚动而不是扩展？

我最近一直在玩 CSS Grid，并注意到一些我无法找到答案的东西。假设我将页面拆分为 2 列，然后在其下方有一行，另一列（跨越两列）。在移动设备上，我希望他们将一个堆叠在另一个之上，然后在某个断点之后返回到上述布局。这是标记：

HTML

SCSS

我注意到在移动设备上，即使我已经grid-gap为我的两个网格部分都定义了，但在移动设备上，当列堆叠时，grid-gap不会维护。所以在下面的小提琴中，当你把窗口变小时，你可以看到当柱子一个一个地堆叠在一起时，和之间的间隙B是C不存在的。这是小提琴：

小提琴

希望我说得有道理！

编辑：请记住，我只在 Firefox 和 Chrome（支持网格）中进行测试。

我正在寻找建立这个网格。

我只是在构建一个简单的 HTML 页面——没有什么复杂的，我不需要在其他地方重用代码。将有 2 个文本框和两个图像将位于此网格上。

我最初打算走这条路：

https://webdesign.tutsplus.com/tutorials/a-simple-responsive-grid-made-even-better-with-sass--cms-21540

哪个工作做得很好，但是使用框架（如 Suzy）或其他解决方案会更好地为我服务吗？

我本质上是在寻找最佳实践以及如何遵守工程 SOLID、KISS、DRY 和 YAGNI 原则。

word-wrap: break-word在网格中不起作用。

对于表格table-layout: fixed，网格的等价物是什么？