问题标签 [css-grid]

我有一个 CSS 网格布局，我想让一些（中间 3）行拉伸到它们的最大尺寸。我可能正在寻找flex-grow: 1与 Flexbox 类似的属性，但我似乎找不到解决方案。

注意：这仅适用于Electron应用程序，因此浏览器兼容性并不是真正的问题。

我有以下 CSS 网格布局：

这将创建以下网格：

当没有一个框包含任何内容时，我希望网格看起来像这样：

我发现当使用不尊重其包含元素的右侧填充的CSS 网格布局时。inputs具体来说，grid-template-columscss 属性似乎是罪魁祸首。

我发现这个问题，除了 CSS Grid Layout，通过box-sizing: border-box. 尽管即使应用了该方法并重置了 CSS，但我似乎仍然无法解决该问题。

这是我的 React 应用程序中行为的简短代码片段：

http://www.webpackbin.com/VJ8DS5kOz

这是一个仅使用普通 HTML + CSS 的示例：

https://repl.it/F75i

我还在我的 React 应用程序中使用Styled Components进行样式设置，鉴于上面的 vanilla CSS 测试，我很确定这不会导致这种行为。

With the CSS Grid Layout Module soon shipping in Firefox and Chrome, I thought that I'd try to get a handle of how to use it.

I've tried to create a simple grid with one item a spanning the left side of all of the rows, with the other items (b, c, d, e, etc.) spanning the right side of individual rows. The amount of items spanning the right side of the rows is variable, so there might be any combination of b, c, d, e, etc., so I'm using the grid-auto-rows property. As such, I cannot define a fixed number of rows for a to span, but I would like a to span all available rows.

What should I do to make a span all rows without knowing how many rows there will end up being?

I am working on an Image-Gallery-Widget where the user can set a thumbnail width, thumbnail height and margin (between thumbnails) and the widget will present all image-thumnails in a nice grid where each image has the same width and height.

I am wondering whether css-flexbox or css-grid makes this possible without the need to define rows and columns in code and without the need for breakpoints/media-queries.

Thumbnail-Images are wrapped in an anchor, so a gallery item (or grid-item) will look something like this:

The gallery items should fully fill the container div, which means, there should not be a gap between the last thumbnail in a row and the container div's right edge (except if we don't have enough items to fill the row i.e. when 3 items ft in a row, but we only have 8 items, then the 3rd row will only have 2 items and a gap to the right which is as wide as one item).

Gallery items can never be wider than the thumbnail-width the user set, because we don't want to degrade the quality of the thumbnails. Let's assume 300px width for this example. The margin between gallery items is fixed and set by the user. If there are not enough items left to fill a row, simply left align them i.e. like so:

I do not want to define any breakpoints in CSS nor add any html for row/column constructs. I want the browser to simply place as much gallery items side by side as fit into the container. If there's a gap on the right (ie 3 thumbnails * 300px width = 900px, but container is 1000px wide), the browser should scale down the grid items, so that one more gallery item will fit in and thus eliminate the gap. I need to be able to define a margin around each gallery item.

You can see the desired responsive behaviour (when changing the browser width) in this gif:

What you see in the gif is done without flexbox but needs a ton of CSS which I was hoping to avoid with flexbox. I have researched flexbox quite some bit, but haven't been able to get my head around it fully just yet.

Thanks for any tips!

我正在为使用 CSS 网格和 CSS 模块的项目使用 VS 代码。但是，当我尝试这样的事情时

我收到一条错误消息，提示为 composes 撰写“未知属性”。另外我正在使用 css 网格，在 VS 代码中似乎没有任何智能感知。我需要安装扩展程序吗？

我正在使用拉力编码规则集。

我正在尝试跨容器垂直对齐可变高度元素，即每个容器中的第一个元素相互垂直对齐，每个容器中的第二个元素相互垂直对齐，等等。

我正在使用 flexbox 但不确定这是否可能？或者是否可以使用 CSS Grid？

期望的结果

查看演示，我还没有设法让它工作。

我很困惑。我正在阅读有关 CSS 中的网格的信息。我正在读一本微软的书，他们写了以下属性：

但在我在 YouTube 上观看的一段视频中，他们写道：

哪一个是正确的？

我的目标是使用 CSS 网格布局进行两列砌体布局。给定一个有子元素的元素：

让孩子们将自己交替排列成列。我的想法是有两个网格区域left并right告诉孩子们分成它们：

这是一个说明我当前状态的 JSBin：https ://jsbin.com/zaduruv/edit?html,css,output

不幸的是，这些元素的反应与它们设置的完全相同position:absolute。也就是说，它们都挤向顶部并相互重叠。

CSS网格布局属性是否有可能让孩子们在列中排队，就像他们通常做的那样position: static？

这个codepen在 Chrome 上创建了一个 100*50 像素的红色单元格网格。这是预期的行为。

Firefox 52 完全忽略了padding-bottom: 50%;，我不知道为什么。

我找不到任何解决方法。有人可以帮帮我吗？

我正在尝试使用网格布局设计带有上/确定/下/左/右按钮的电视遥控器。问题是结果出乎我的意料。我只是想定义 3 行和 3 列，特定位置和空间在它们之间平均分配。我究竟做错了什么？结果看起来像这样

代替

代码