防止内容扩展网格项目

发布于 2025-02-10 01:57:58 字数 764 浏览 3 评论 0原文

tl; dr：是否有table-layout之类的东西：CSS网格的修复？

我试图在几个月内创建一个带有大4x3网格的年度观看日历，并在其中嵌套了7x6网格。

日历应填写页面，因此年度网格容器的宽度和高度为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);
}

这是一个工作示例：

”简单性，每月在那支笔中有31天，并从星期一开始。

我还选择了一个荒谬的小字体大小来证明问题：

网格项目（=日单元格）非常凝结，因为页面上有几百个。而且，一旦白天的标签变得太大（可以随意使用左上方的按钮在笔中的字体大小上播放），网格的大小就会增长并超过页面的身体尺寸。

有什么方法可以防止这种行为？

我最初宣布我的一年网格在宽度和高度上是100％，因此这可能是开始的一点，但是我找不到任何与网格相关的CSS属性，这些属性适合所需的需求。

免责声明：我知道，在不使用CSS网格布局的情况下，有一些非常简单的方式来设置该日历。但是，这个问题更多地是关于该主题的一般知识，而不是解决具体示例。

原文

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

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

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

Here's a working example: https://codepen.io/loilo/full/ryXLpO/

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?

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.

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

木落 2025-02-17 01:57:58

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

网格项目的初始大小为最小宽度：自动和最小值：自动。

您可以通过将网格项目设置为最小宽度来覆盖此行为：0，min-height：0或溢出，除<<代码>可见。

从规格：

6.6。自动最小网格尺寸
项目
要为网格项目提供更合理的默认最小尺寸，此规范定义了auto min Width的值>还将指定轴中的自动最小尺寸应用于溢出 IS 可见的网格项目。（效果类似于弹性项目上施加的最小尺寸的效果。）

这是一个更详细的说明涵盖了flex项目，但也适用于网格项目：

为什么flex项目不缩小过去的内容大小？

此帖子还涵盖了嵌套容器的潜在问题和已知的渲染差异在主要浏览器中。

要修复布局，请对您的代码进行这些调整：

.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 demo

`1fr 1fr` vs vs vs <代码> minmax（0，1fr）

上面的解决方案在网格项目级别运行。有关容器级别的解决方案，请参阅此文章：

为什么Minmax（0，1fr）适用于长元素，而1FR不做？

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

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

You can override this behavior by setting grid items to min-width: 0, min-height: 0 or overflow with any value other than 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 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:

Why don't flex items shrink past content size?

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 demo

`1fr` vs `minmax(0, 1fr)`

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

Why does minmax(0, 1fr) work for long elements while 1fr doesn't?

回复收藏 0 原文

第七度阳光i 2025-02-17 01:57:58

以前的答案非常好，但我也想提一下，是网格的固定布局，您只需要编写minmax（0，1fr）而不是编写1fr作为您的轨道大小。

回复收藏 0 原文

〃温暖了心ぐ 2025-02-17 01:57:58

现有答案解决了大多数情况。但是，我遇到了一个情况，我需要网格电池的内容为溢出：可见。我通过绝对放置包装器（不是理想的，但我知道最好的）来解决它：


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

https：> https： //codepen.io/bjnsn/pen/vyyvpzv

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:


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

https://codepen.io/bjnsn/pen/vYYVPZv

回复收藏 0 原文