防止内容扩展网格项目 [英] Prevent content from expanding grid items

问题描述

TL; DR: CSS网格是否有类似于table-layout: fixed的东西?

TL;DR: Is there anything like table-layout: fixed for CSS grids?

我试图用几个月的4x3大网格创建一个年视图日历，而几天中则嵌套了7x6网格.

I tried to create a year-view calendar with a big 4x3 grid for the months and therein nested 7x6 grids for the days.

日历应填满页面，因此Year网格容器的宽度和高度分别为100％.

The calendar should fill the page, so the year grid container gets a width and height of 100% each.

.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);
}

这是一个工作示例: https://codepen.io/loilo/full/ryXLpO/

为简单起见，该笔中的每个月都有31天，从星期一开始.

For simplicity, every month in that pen there has 31 days and starts on a Monday.

我还选择了一个可笑的小字体来演示该问题:

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?

我最初宣布年份网格的宽度和高度为100％，所以这可能是起点，但是我找不到任何与网格相关的CSS属性都可以满足这一需求.

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.

免责声明:我知道有很简单的方法可以在不使用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.

推荐答案

默认情况下，网格项目的大小不能小于其内容的大小.

By default, a grid item cannot be smaller than the size of its content.

网格项的初始大小为min-width: auto和min-height: auto.

Grid items have an initial size of min-width: auto and min-height: auto.

您可以通过将网格项设置为min-width: 0，min-height: 0或overflow而不使用visible以外的任何值来覆盖此行为.

You can override this behavior by setting grid items to min-width: 0, min-height: 0 or overflow with any value other than visible.

根据规范:

6.6.自动最小网格尺寸 项目

6.6. Automatic Minimum Size of Grid Items

要为网格项目提供更合理的默认最小尺寸，此 规范定义min-width/min-height的auto值还将指定轴上的自动最小大小应用于overflow为visible的网格项目. (效果类似于对弹性商品施加的自动最小尺寸.)

To provide a more reasonable default minimum size for grid items, this specification defines that the auto value of min-width / min-height also applies an automatic minimum size in the specified axis to grid items whose overflow is visible. (The effect is analogous to the automatic minimum size imposed on flex items.)

这是有关弹性项目的更详细说明，但它也适用于网格项目:

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 containers and 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 */
}

修订后的代码笔

以上解决方案在网格项目级别上运行.有关容器级别的解决方案，请参见这篇文章:

The solution above operates at the grid item level. For a container level solution, see this post:

• minmax(0，1fr)如何适用于长元素，而1fr则不适用?

这篇关于防止内容扩展网格项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！