问题标签 [css-grid]

我对新的 CSS Grid 规范很感兴趣，但我遇到了边框问题。

是否可以在 CSS 网格中折叠边框，或者有什么方法可以设置装订线的样式？

正如您在下面的代码段中看到的，10px边框20px在块之间堆叠（总计）。

我知道这个问题不是 CSS Grids 独有的，但我希望它能够提供新的解决方案，在所有框之间和外边缘创建统一的 10 像素边框。

我的实际用例是我正在制作的用于练习使用 Grids 和 React 组件的日历。您可以在这里看到我遇到的问题：

.

由于每个月都不一样，我会考虑很多不同的边缘情况。

我制作了一个响应式 flexbox 网格。它适用于 Chrome，但不适用于 Safari 和 IOS。我肯定错过了什么。谁能告诉我我做错了什么？

密码笔

我在 CSS 中创建了一个 float 示例。但是，我对元素之间的顺序和空间有疑问。这是结果：

灰点应位于绿点的右侧，甚至位于绿点的右侧。

任何想法？谢谢，

这是我的代码示例：https ://jsfiddle.net/dalenguyen/mfj78LL5/

如何强制 css 网格容器为单页应用程序获取设备屏幕的完整宽度和高度？修改后的示例来自 Mozilla：Firefox 文档

我正在尝试实现标题覆盖下一行的css网格模式。

我添加了我的代码片段，顶部带有标题，所附图像应该向您展示我想要实现的目标。

谢谢

我正在尝试使用 flexbox 构建这样的布局：

我怎样才能将物品堆叠在一起？

我使用 CSS 网格构建了上面屏幕截图中的内容，但未能使用 flexbox 执行此操作。

我有一个 3 X 3 CSS 网格。

我有一排我有三个项目A，B& C。

我希望项目C有rowspan2 个。

为此，我正在使用grid-row: 1 / span 2;. 它占用两行，但它被放置在第一列而不是简单地位于第三列。我不知道为什么会这样。

我希望项目 C 留在它在 HTML 中的位置。

解决此问题的一种方法是明确设置grid-column: 3 / span 1我不想做的事情。我希望项目以它们在 HTML 中的方式放置。

有没有办法抑制这种行为？

我可以在 div-1 下面显示 div-3 吗？

设计截图：

我希望 CONTENT flex 列环绕左侧的 rowChild592 列。

我有这个：

我希望它看起来像这样：

我在这里看到了一个关于将 div 设置为表格单元格的答案：

• 将表格内容包裹在多行的浮动 div 周围

我是否必须用一张表重做所有这些，或者是否可以将一个 flex 列包裹在另一个表上？

我希望 div 元素的布局如下所示：

如果屏幕足够大，那么单行中有很多块。

例如，我想将每个块的最小宽度设置为 250px。

所以在大屏幕上，我可以为这些元素提供以下内容。右边是地图（可关闭），如果用户隐藏它，则行中将有 6 个块。

接下来，当我水平缩小浏览器窗口时，所有块都不适合该行，因此它们移动到下一行。好的，现在可以这样工作了，他们去第二行，但是他们在 div 块和地图之间留下了空间。如下图所示。

我想有这样的布局，如果 4 个块不适合空间，那么可以有 3 个块，但它们同样填充剩余空间（没有剩余的黄色空间）。请参阅下面的图片。

然后当浏览器窗口缩小更多时，它应该如下所示

在移动设备和非常狭窄的浏览器窗口上：

好的，我可以使用这样的 CSS 样式来实现这样的效果：

那么我应该使用媒体查询手动更改它：

当地图消失时，甚至可能是这样

Ok FLEX 不是那么向后兼容，所以我可以玩得更多，做这样的事情：

然后还根据屏幕尺寸手动更改此宽度并添加clear: left after last element using

或在其他元素进行其他清除修复之前

甚至（是必要的吗？）添加 clear: left 在每一行之后使用：

像这样的宽度： calc() 取决于屏幕大小和 divs witdh

但是后来我需要使用许多媒体查询，我想将这个 CSS 包装在一些有角度的 2+ 组件中，并且只有这样的东西：

我认为使用@media 查询会稍微改善这种行为，但我的组件将与屏幕大小紧密结合，我认为没有像我希望的那样通用，可以灵活地指定最大列和最小宽度。