CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动，表格，绝对定位甚至flexbox（另一种CSS3技术）来构建各种网格，从简单到复杂。一般情况下，请勿将此标记用于CSS网格系统。
如果宽度为 0px 的网格项包含宽度为 0px 且左边距大于 0px 的元素，则会溢出 Firefox 中的网格容器
如果网格项的宽度为0px 包含宽度为 0px 且“margin-left”CSS 属性值大于 0 的元素 并放置在网格柱轨道上，其大小为&q...
有没有办法强制网格最后一行中的所有项目填充该行，无论它们有多少？ 我不知道网格中的项目数量，因此我无法定位它们
考虑以下布局，显示 5x4 正方形，一些在视图中隐藏，但其余的可以通过拖动来查看... 似乎使用以下网格布局我无法滚动
我有网格，每个元素下面都有一个图像和其他div。因为它是一个网格，所以每个元素都有响应宽度，因此它会随着屏幕缩小而自动缩放。我想要我...
我为整个网格指定了 max-height: 400px。但是子元素超出了界限，尽管它们应该相对于父元素的大小按高度进行拉伸。 演示 我为整个max-height: 400px指定了grid。但是子元素超出了界限，尽管它们应该相对于父元素的大小按高度拉伸。 演示 <div class="grid"> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> </div> * { box-sizing: border-box; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; outline: 2px solid royalblue; max-height: 400px; gap: 10px; } .grid__col { height: 100%; } .grid__col:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 3; } .grid__col:last-child { grid-column: 3 / -1; } .grid__col img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; } 您的网格将正确调整大小，直到达到 400 像素的垂直高度。当你的网格达到这个高度时，它会停止高度增长，但宽度不会增长。这会导致您的图像继续增长，因为它们不遵守容器最大高度 400px。 设置 max-width 也会在容器达到 400px 高度时停止增长。在这种特定情况下，是由 max-width: 850px; 完成的。 工作示例
基本CSS +网格：如何防止一个动态网格单元炸毁我的整个网格容器？ [重复]
我知道这是一个常见问题，但我还没有看到有人在不放弃网格或硬编码像素大小的情况下回答这个问题（这似乎是不好的做法），所以想看看是否可能： ...
我的网站上有一个常见问题解答部分，其中包含问答项目，仅在用户单击项目之前显示标题，然后它会展开以显示答案。整个部分是一个 2x2 网格，每个项目都是...
.nevigate-page 显示方式：网格 网格模板区域：'导航图标左箭头' '导航文本左箭头' 间隙：1.25rem .nevigation-图标 网格 ar...
我想增长一个网格来填充剩余的垂直空间。日历上方有几个固定高度的 div，我希望它们保持固定高度。随着窗口垂直增长，我...
我开始了解 CSS 的网格和子网格。使用具有两列和一些子网格的简单表单。 父网格有一个间隙：1em - 列和行都正确显示了 1em 间隙。布...
我知道这听起来像是使用百分比值的典型问题，但它是不同的。至少乍一看是这样。 情况是这样的：我们有一个包含一些元素的网格： 我知道这听起来像是使用百分比值的典型问题，但它是不同的。至少乍一看是这样。 情况如下：我们有一个包含一些元素的网格： <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 网格有一个 max-width 但它是可滚动的： .container { display: grid; grid-template-columns: repeat(10, max-content); max-width: 400px; overflow-x: auto; } 我们还可以定义一个项目应该如何，以便它们占用一些空间： .item { background-color: navy; width: 100px; aspect-ratio: 1 / 1; } 现在，这按预期工作：我可以向右滚动，并且只能看到网格内包含的项目。 但是，如果我将 gap: 5px; 添加到网格中并以相同的方式滚动，则可滚动区域内右侧最远的像素突然不会被元素占用。这些是间隙以某种方式添加的“额外像素”。 您可以在这里看到它。 我还注意到，只有当项目少于声明的列时才会发生这种情况（例如，如果我们将 grid-template-columns 更改为 repeat(4, max-content); 并将 max-width 更改为 300px; ，则效果很好。） gap 会向网格的总宽度添加额外的空间，这可能会导致溢出并在可滚动区域的右侧创建额外的空间，特别是当项目数小于 grid-template-columns 中指定的列数时。 为此，请使用 grid-template-columns 与 1fr 和 grid-auto-flow 与 column 的组合，因此这将创建一个响应式网格，该网格根据容器宽度调整列数，并且网格项填充在按列方式。 .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-flow: column; max-width: 400px; overflow-x: auto; gap: 10px; background: cyan; } .gap-10 { gap: 10px; } .item { background-color: navy; width: 100px; aspect-ratio: 1 / 1; } .item:nth-of-type(2n) { background-color: red; } <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container gap-10"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
我刚刚完成向网格内的图像添加变换，以便将鼠标悬停在图像上时它们会显示一点缩放。然后我添加了一个溢出：隐藏到图像所在的“.post”类......
只是想知道是否可以使用 row-start-x 和 row-span-x 设置元素的高度，然后在不同的断点处恢复为由内容确定的大小？ 在
CSS 网格：如何在尊重最大宽度的同时使部分内容在一侧转义容器
我正在开发一个布局，其中我需要一个部分元素在一侧突破其容器以扩展全宽度，但在另一侧，它应该尊重其父级的最大宽度。我很...
有没有办法通过纯 HTML/CSS 来做到这一点？这就是我想要实现的目标： |----------------------------| <-- start of screen | header | fixed height |--------------...
我有一个相当简单的 CSS 网格，有 12 列。我正在使用 CSS 网格的行开始和行结束功能将我的项目准确放置在我想要的位置。但我遇到了一个问题，我越...
我有一个网格谜语，看起来很简单，但我就是不知道，两次AI聊天也失败了。 我有这个： .续{ 显示：网格； 间隙：20px； 网格模板列：重复（自动...
我最近开始使用CSS网格。 我需要设置一个空的 div 元素作为网格元素之一，以便我可以在需要时通过 javascript 插入内容。 问题是间隙应用于此
我想创建一张非常简单的卡片，仅包含一张图像、一个段落和两个按钮。 见下图： 我要创建的卡片： ... 我想创建一张非常简单的卡片，仅包含一张图像、一个段落和两个按钮。 见下图： 我要创建的卡片： <div class="container"> <img src="" alt=""> <p></p> <button></button> <button></button> </div> .container{ padding: 2rem; grid-template-columns:[img-start] 120px [img-end content-start] 1fr [content-end]; grid-column-gap: 1.6rem; grid-template-rows: repeat(2, auto) } 然后我放置按钮： button{ grid-column: content; grid-row: 2/3; } .container { padding: 2rem; grid-template-columns: [img-start] 120px [img-end content-start] 1fr [content-end]; grid-column-gap: 1.6rem; grid-template-rows: repeat(2, auto) } button { grid-column: content; grid-row: 2/3; } <div class="container"> <img src="" alt=""> <p></p> <button></button> <button></button> </div> 但是，这些按钮重叠并且彼此不相邻，所以我想知道是否有一种方法可以将多个网格项放置在正常的网格区域中，并说该区域就像一个弹性行包装器？ 非常感谢！ 我会使用带有一些包裹按钮的 div 的 Flexbox，并将此 div 分配到网格区域内，但我想使用网格来获取此 CSS 属性的知识。所以我想知道是否有一种原生网格方式可以做到这一点？ 正如@Chris Barr提到的，当内容均匀分布为列和行时，CSS 网格布局非常有用。在这种情况下，您可以使用如下所述的Flex。 .container { display: flex; flex-direction: row; padding: 10px; border: 1px solid #000; width: 500px; } .thumbnail { width: 150px; } .content { padding-left: 10px; } <div class="container"> <img src="https://shorturl.at/aceI2" alt="" class="thumbnail"> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem diam, egestas at ipsum nec, luctus molestie turpis. Proin tempus sagittis lobortis. Ut nec velit ac odio eleifend semper. </p> <button>Button 1</button> <button>Button 2</button> </div> </div>