问题标签 [css-grid]

例如，我有一个网页，其中包含使用css-grid(divA和divB) 的多个 div。我也有 2 个显示器（物理屏幕）。

我想显示divA到第一台显示器和divB第二台显示器。

我正在寻找以下问题的答案：

1. 如何定位divA在第一台显示器和divB第二台显示器上（响应式）？
2. 请问有什么模拟器可以在单个显示器上操作双屏来测试这个场景吗？

非常感谢任何帮助或建议。

谢谢，阿什温

我正在为 Windows 8 开发基于 JavaScript 的 Metro 应用程序。我正在尝试设置具有多列文章的容器背景。基本上，我在左侧有一个列表视图，在右侧有一个多栏文章（类似于拆分视图）。

我正在尝试将文章流设置为水平（使用 column-width CSS 属性的多列），但是当我设置文章的背景时，它只设置到视口边缘。

使用 Split App 模板创建新项目，并将以下 HTML替换为split.html 中的当前 HTML（内部正文标记）：

将 split.css 文件的内容替换为以下内容：

运行应用程序并单击集线器上的任何磁贴以查看 split.html。向右滚动，注意背景色文章不正确。

我正在尝试使用Bootstrap并使用 jsfiddle.net 创建一些快速而肮脏的测试。

然而，我在一个非常简单的测试中遇到了一堵砖墙。我只是想在 Bootstrap 中看到网格系统，所以我复制了他们的第一个示例：

但是，它似乎不起作用——“Span 4”和“Span 8”看起来是堆叠的，而不是预期的两列布局。

我错过了一些明显的东西吗？这是小提琴：http: //jsfiddle.net/8Xf2j/1/

谢谢

我正在尝试在 Windows 应用程序和 Chrome 网络浏览器中使用它，但网络浏览器不显示canvasButtonsdiv。我希望canvasButtons显示在 下方#canvasDiv。该overflow:hidden属性导致它不显示。但它可以作为 Windows 应用程序正常工作。是否有任何等效的 ms-grid ？

我尝试使用display: flex该canvasButtons部分，但即使这样也效果不佳。div 得到了我想要的canvasButtons对齐，但点击处理程序后来没有工作。

我试图了解 HTML 结构如何影响CSS 网格布局模块规范。我正在使用启用了实验功能的 Chrome Canary。

附加代码按预期工作，但将导航和搜索放在标题标签内只是为了语义会抛出 CSS 网格放置。

我缺少什么能够使用 CSS 网格模块并仍然将我的语义标头与导航、品牌和搜索包装在我的标头标签中？

我在商店里展示产品。每个产品都有自己的盒子。我想将盒子放在一个网格中，每行 2 个。但是它们也将被划分为类别，因此我想在属于该类别的每组框上方放置一个全角标题。这是我的 HTML：

和 CSS：

和JS 小提琴

如您所见，网格工作正常，直到引入第二个 h2 元素，之后它分崩离析，因为如果最后一组具有奇数个框，则 2n+2 被丢弃。基本上我需要做的是在每个标题之后重置 2n+2 公式。

快速而肮脏的方法是将每组框包装在一个 div 中，但如果可以避免的话，我宁愿不向页面引入不必要的标记。

有更清洁的解决方案吗？

我正在研究 CSS 网格，我遇到了一些奇怪的事情。我想要 3 列：1 和 3 是150px宽的，2 是其余的。这应该是可能的，我想，但这不起作用：

所以我尝试了这个，并且确实有效，但是很愚蠢：

然后我遇到了这个例子： http: //gridbyexample.com/examples/code/layout1.html它使用它来使内容列自动调整大小：

这就是我所做的！他们的例子有效，而我的没有！？

我的示例小提琴： http: //jsfiddle.net/rudiedirkx/w5xho67w/3/（如果屏幕> = 700px，则触发3列）。

我一定是在做一些愚蠢的事情，但我找不到区别......

不是：

• 因为body是grid
• 因为它是一个 iframe
• 因为包装器 ( body) 不是固定宽度（既不工作100%也不900px工作）

我正在尝试<button>使用 flexbox 将 -tag 的内部元素居中justify-content: center。但 Safari 并不以它们为中心。我可以将相同的样式应用于任何其他标签，并且它可以按预期工作（请参阅<p>-tag）。只有按钮是左对齐的。

尝试使用 Firefox 或 Chrome，您会看到不同之处。

我必须覆盖任何用户代理样式吗？或者这个问题的任何其他解决方案？

还有一个 jsfiddle：http: //jsfiddle.net/z3sfwtn2/2/

我正在尝试实现以下表格布局：

第三列适合单元格中的内容。
最后一个固定为100px。
前两列与比例共享剩余空间。

我有一个具有以下属性的 flex 容器（蓝色方块）：

因此，它的孩子（浅蓝色方块）如下所示排列。但是，我想在正常流程之外添加另一个孩子（绿色方块）并将其相对于其父级定位。要将其定位为如下所示，理想情况下，我会编写类似bottom: 20px;and的内容margin: auto;。

我试图玩弄z-index无济于事。我应该如何处理这个？我应该求助于创建另一个父元素吗？