问题标签 [css-grid]

我正在使用这个画廊网格布局

html:

CSS：

我需要图像来填充全屏 div，并且可以裁剪掉不会被屏幕覆盖的图像。现在的情况是，如果图像不适合屏幕，它会转到网格中的下一列，从而在每列的末尾留下大的空白区域。

我使用 25 张图像来填充 5 列网格，并且没有全屏 div，网格只会扩展 3 个屏幕。我只想要 1 个全屏 div，即使这意味着许多图像将不可见并且会被截断。

有没有办法获得自动跨行（项目占用垂直网格单元的自动数量）？

在我的示例中，我希望单元格 8 自动跨越 2 个（或更多）单元格，而无需明确表示span 2. 我一直在寻找如何做到这一点，但似乎不可能。

我想让每个单元格是 100px 的倍数，这样最小的单元格是 100px，如果内容溢出，它会变成 200px 高，更多的内容是 300px，等等。

换句话说，我希望有一种方法可以让 CSS 网格自动确定 XX：

https://codepen.io/joe_g/pen/VbLRpN

I am new to css grids, and I am trying to build a page with this layout:

The problem I have is the .main class and the grid inside the container grid.

I think I have the wrong setup for the grid in .main.

For the upper container .container, I can see that three columns layout is working.

On the first row, I want the div image div to span 2 out of three columns, and blogart div to take up one column.

The second row should have three blogart divs spaning one column each.

But in the inner grid .main, all the markup is in a fourth column.

I have setup a codepen Greatful for any suggestions.

This is my markup, the css is in the codepen:

-Thanks

如何防止页脚行与内容行重叠？

这就是我得到的：

我正在研究网格列的跨度大小。

我的网格列有这个代码：

我得到的结果并不是我想要的。我以为：

将跨越每个 blogart div 2 列，三个 blogart div 将跨越所有 6 列。

对于第三个及以后的所有 div，我想要的是这样的：

我在我的示例中设置了一个 codepen，我在这里提到的问题从第 66 行开始。

请检查这个小提琴，当你调整窗口大小和卡片向下时，卡片的底部看起来很奇怪，它们之间有更多的空间。我希望卡片的底部部分与上述卡片对齐。

我知道这可以很容易地完成，display: inline-block但我正在尝试使用 flexbox ie 来做到这一点display: flex。

我想在没有 JS 的情况下实现可调整大小的窗格，只使用CSS Grid layout。这可能吗？

例如，CodePen 的编辑器为其 HTML / CSS / JS 编辑器提供可调整大小的窗格。另外，请参阅下面的示例，它在纯 JS 中实现它（我似乎无法将 URL 添加到其中的 CodePen 示例，因此添加属性有点困难。代码来自http://codepen.io/声音/）。

PS 作为旁注，我通过添加和删除'mousemove','mouseup'事件重新实现了上面的例子，并且想知道这是否比使用布尔值isResizing并保持事件侦听器始终存在“更好”（更高性能）......

我有两个.flex-container和三个.box孩子，我想以不同的方式设置。请参阅我的片段以获得视觉效果和我的解决方案。

第一个很容易，因为我可以将第一个框设置为width: 100%;然后使用flex-wrap: wrap;. 很好走。

对于第二个.flex-container我发现我必须.box-container在最后两个盒子周围添加一个额外的容器，然后给它flex: auto;以获得所需的效果。

我的问题是我需要这个额外的容器吗.box-container吗？如果答案是肯定的，那就这样吧。我觉得我错过了一些基本的东西，但我认为它可能需要它，因为这些布局不是基于高度的，我猜它是垂直方向的？我尝试flex-direction: column;以不同的方式使用。

任何使用 flexbox 且没有额外容器的解决方案，例如我展示的第一个布局，将不胜感激。谢谢你。

https://codepen.io/dye/pen/LyRJym

在这个布局中，我想在网格布局的两个部分之间有一种分隔线。任一部分中的项目数量都是未知且动态的。解决这个问题的最佳方法是什么？我添加了一个分隔线，我想从第一列行开始并在最后一列行结束。但是，我不知道如何选择最后一行。

目前，我有

当浏览器大小显示为 4 列时，这看起来很棒。但是当浏览器调整大小并增加/减少列数时，布局会中断。我怎样才能总是选择最后一列？或者有没有更好的做法来完成这个不涉及使用分隔线？

*注意：我之前的方法是有 2 个网格容器，每个部分一个。但由于布局的动态特性，两个部分的列不一定对齐。理想情况下，我希望列匹配，即使，例如，一个部分只有一个项目，而另一部分有很多项目。

谢谢！

使用 时如何指定最大列数，display: grid;当内容变得太宽（或小于最小大小）时，它会自动中断？有没有办法在没有媒体查询的情况下做到这一点？

例如，当没有足够的空间容纳内容时，我有以下内容不会进入单列模式。