CSS 防止内容扩展网格项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43311943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent content from expanding grid items
提问by Loilo
TL;DR:Is there anything like table-layout: fixedfor CSS grids?
TL;DR：有没有类似table-layout: fixedCSS 网格的东西？
I tried to create a year-view calendar with a big 4x3 grid for the months and therein nested 7x6 grids for the days.
我尝试创建一个年视图日历，其中几个月有一个大的 4x3 网格，其中几天嵌套了 7x6 网格。
The calendar should fill the page, so the year grid container gets a width and height of 100% each.
日历应填满页面，因此年份网格容器的宽度和高度均为 100%。
.year-grid {
width: 100%;
height: 100%;
display: grid;
grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}
Here's a working example: https://codepen.io/loilo/full/ryXLpO/
这是一个工作示例：https: //codepen.io/loilo/full/ryXLpO/
For simplicity, every month in that pen there has 31 days and starts on a Monday.
为简单起见，该笔中的每个月都有 31 天，从星期一开始。
I also chose a ridiculously small font size to demonstrate the problem:
我还选择了一个小得离谱的字体来演示这个问题：
Grid items (= day cells) are pretty condensed as there are several hundreds of them on the page. And as soon as the day number labels become too large (feel free to play around with the font size in the pen using the buttons on the upper left) the grid will just grow in size and exceed the page's body size.
网格项目（= 日单元格）非常浓缩，因为页面上有数百个。一旦日期标签变得太大（使用左上角的按钮随意调整笔中的字体大小），网格就会增大并超过页面的正文大小。
Is there any way to prevent this behaviour?
有什么办法可以防止这种行为吗？
I initially declared my year grid to be 100% in width and height so that's probably the point to start at, but I couldn't find any grid-related CSS properties that would've fitted that need.
我最初声明我的年份网格的宽度和高度为 100%，所以这可能是开始的重点，但我找不到任何符合该需求的与网格相关的 CSS 属性。
Disclaimer:I'm aware that there are pretty easy ways to style that calendar just without using CSS Grid Layout. However, this question is more about the general knowledge on the topic than solving the concrete example.
免责声明：我知道有一些非常简单的方法可以在不使用 CSS 网格布局的情况下设置日历的样式。然而，这个问题更多的是关于该主题的一般知识，而不是解决具体的例子。
回答by Michael Benjamin
By default, a grid item cannot be smaller than the size of its content.
默认情况下，网格项不能小于其内容的大小。
Grid items have an initial size of min-width: autoand min-height: auto.
网格项目的初始大小为min-width: auto和min-height: auto。
You can override this behavior by setting grid items to min-width: 0, min-height: 0or overflowwith any value other than visible.
你可以通过设置网格项目覆盖这种行为min-width: 0，min-height: 0或overflow比其它任何值visible。
From the spec:
从规范：
6.6. Automatic Minimum Size of Grid Items
To provide a more reasonable default minimum size for grid items, this specification defines that the
autovalue ofmin-width/min-heightalso applies an automatic minimum size in the specified axis to grid items whoseoverflowisvisible. (The effect is analogous to the automatic minimum size imposed on flex items.)
为了为网格项目提供更合理的默认最小尺寸，本规范定义
auto了min-width/的值min-height也将指定轴上的自动最小尺寸应用于其overflow为 的网格项目visible。（效果类似于强加在弹性项目上的自动最小尺寸。）
Here's a more detailed explanation covering flex items, but it applies to grid items, as well:
这里有一个更详细的解释，涵盖了弹性项目，但它也适用于网格项目：
This post also covers potential problems with nested containersand known rendering differences among major browsers.
这篇文章还介绍了嵌套容器的潜在问题以及主要浏览器之间已知的渲染差异。
To fix your layout, make these adjustments to your code:
要修复您的布局，请对您的代码进行以下调整：
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
background: #fff;
grid-gap: 2px;
min-height: 0; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
.day-item {
padding: 10px;
background: #DFE7E7;
overflow: hidden; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
1frvs minmax(0, 1fr)
1fr对比 minmax(0, 1fr)
The solution above operates at the grid item level. For a container level solution, see this post:
上述解决方案在网格项级别运行。有关容器级解决方案，请参阅此帖子：
回答by FremyCompany
The previous answer is pretty good, but I also wanted to mention that there isa fixed layout equivalent for grids, you just need to write minmax(0, 1fr)instead of 1fras your track size.
以前的答案是相当不错的，但我也想提一提，有是有固定的布局相当于为网格，你只需要编写minmax(0, 1fr)，而不是1fr为你的轨道的大小。
回答by bjnsn
The existing answers solve most cases. However, I ran into a case where I needed the content of the grid-cell to be overflow: visible. I solved it by absolutely positioning within a wrapper (not ideal, but the best I know), like this:
现有的答案解决了大多数情况。但是，我遇到了一种情况，我需要网格单元的内容为overflow: visible. 我通过在包装器中绝对定位来解决它（不理想，但我所知道的最好的），如下所示：
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
background: #fff;
grid-gap: 2px;
}
.day-item-wrapper {
position: relative;
}
.day-item {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
background: rgba(0,0,0,0.1);
}
回答by Pedro JR
an easier thing to do will to set grid item max width like so:
更简单的事情是设置网格项目最大宽度，如下所示：
//for the container
.gridContainer{
display: grid;
grids-templates-column: repeat (12, 1fr);
}
//for the grid item
.gridItem{
max-width: 100%;
grid-column: span 4 //4 can be any number from1-12 as we specified in the grid template
}
