问题标签 [css-grid]

我正在学习 CSS Grid，但我在调整图像大小时遇到​​了问题。

为了向您展示问题，我创建了一个包含 2 列的主布局，在第一列中，我创建了另一个网格，我想将图像和一些文本放在一个列中。

请删除html评论，以便您看到图像。

在代码片段中，红色区域显示了图像应该去的单元格。现在，图像大于红色“容器”（高度：200px）网格单元格，我希望图像在单元格内缩小，以便它适合内部并保持纵横比（截断左/右或顶部/bottom 是必需的）。图像上的对象拟合不起作用。像“object-position: 50% 50%”这样定位图像也很好，但这也不起作用。我目前不确定如何解决此问题。

谢谢您的帮助。

我有一页满是积木的页面display: inline-block。我想让一些大四倍或两倍大，所以我使用float: left或right放置其他块。

我的问题是如果我有一个五元素行，我怎么能在它中间放一个更大的元素？（float自然地放在一边）。

这是一个示例片段：

这是我想从上面的片段中得到的

CSS 工作组成员 Rachel Andrews 在会议视频中提到 Sass 与新的 CSS 网格规范兼容。有了这个，有人知道在 Sass 的网格模板区域上间隔“ASCII 艺术”的语法吗？从那以后，我检查了 Sass 文档，但（还）找不到任何东西。我得到的错误涉及间距。感谢社区中的任何指示。如果没有，请回到 .css 直到那时（：谢谢...

我正在玩 CSS 网格（目前不在），我无法在 Firefox 中获得粘性页脚。它在 Chrome 中运行良好，所以也许这是一个浏览器问题，但我尊重社区的更多知识。

我将我的身体设置为主要的网格元素并像这样定义列/行：

现在，我假设 'grid-template-rows: min-content min-content 1fr min-content' 意味着第 1、2 和 4 行将根据其内容假定大小，第 3 行将吸收所有剩余的空间，这就是它在 Chrome 中的工作方式，但不是 Firefox。

代码笔： http ://codepen.io/anon/pen/NpzaRY

ps 我应该在我的 DOM 资源管理器中添加，body 元素正确显示为填充窗口的整个高度。

考虑以下代码段：

最终结果是一个类似表格的显示，其中每一行的每个项目都是该列中最宽项目的宽度。

这很棒 - 但我需要将表格布置成行......

display: table解决了这个问题 - 但表格在间距、对齐方式等方面存在一些缺点。因此，grid 和 flex 看起来很有吸引力。

唉，我无法弄清楚如何获得所需的信息。

添加display: grid到.row有助于信息的顺序，但不保留相等的列宽。

项目内容会有所不同，因此不能使用固定宽度，并且不希望网格/弹性跨越整个页面/包含宽度。

我想做的是用动态数量的单元格制作一个CSS 网格。为了简单起见，我们假设每行总是有四个单元格。我可以指定具有如此动态行数的网格吗？

为方便起见，下面是 Flexbox 的实现：

PS显然，我第一次不够清楚......我想使用最新的CSS网格布局重新创建这个效果。

基于上一个问题，我正在尝试在我的网格布局中添加更大的块。在最后一个问题中，我需要一个 div 跨越多行。现在的问题是我需要一个 div 来跨越多个行和列。

如果我有一个五元素行，我怎么能把更大的元素放在它的中间呢？（float自然而然地放在一边）。

这是一个示例片段：

我不想使用display: gridwrapper 元素，因为Can I Use 指出这是目前非常先进的技术。我希望有一个非网格、非表格的解决方案。

这是我想从上面的片段中得到的

是否可以在不使用媒体查询的情况下制作 CSS 网格包装？

在我的例子中，我有一个不确定的项目数量，我想放置在一个网格中，并且我希望该网格能够换行。使用 Flexbox，我无法可靠地很好地分隔事物。我也想避免一堆媒体查询。

这是一些示例代码：

这是一张 GIF 图片：

作为旁注，如果有人能告诉我如何避免像我一样指定所有项目的宽度grid-template-columns，那就太好了。我希望孩子们指定自己的宽度。

谁能告诉我如何正确实现父网格和子网格的示例（使用标准 Webpack 模板的约定）？App.vueHello.vue

我尝试了以下方法，但子网格似乎不起作用。

应用程序.vue

你好.vue

编辑：我都试过了grid，subgrid对于孩子的显示属性，都不管用。

这是路由器的定义：

我在下面创建了一个布局display: grid，我使用了旧padding-top技巧来制作流畅的方形 div，但我想知道是否有更好的方法来做到这一点，无论是使用 CSS Grid 还是 Flexbox。布局应该是原样，而不是使用 JS。

https://codepen.io/anon/pen/GWzavX