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

问题描述

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

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.

日历应填满整个页面，因此年份网格容器的宽度和高度均为 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.自动最小网格尺寸项目

为了给网格项提供更合理的默认最小尺寸，这个规范定义了 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 */
}

jsFiddle 演示

上述解决方案在网格项级别运行.有关容器级解决方案，请参阅此帖子:

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

• 谁对长元素使用 minmax(0, 1fr) 而 1fr 不行?

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