Grid items that limit content expansion

Question

TL;DR: Is there a property similar to table-layout: fixed for CSS grid layout?

---

I'm trying to create a year view calendar with a large 4x3 grid for the months and nested inside is a 7x6 grid for the dates.

The calendar should fill the entire page, so the width and height of the year grid container are set to 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 is a working example: https://codepen.io/loilo/full/ryXLpO/

For simplicity, each month in this example has 31 days and starts on Monday.

I also chose a very small font size to demonstrate the problem:

The grid items (i.e. date cells) are very compact since there are hundreds of date cells on the page. And once the date labels get too big (feel free to use the buttons in the upper left corner to adjust the font size in the example), the grid grows and exceeds the bounds of the page.

Is there a way to prevent this behavior?

I originally set the width and height of the year grid to 100%, so that might be the place to start, but I can't find any grid-related CSS properties to satisfy this need.

Disclaimer: I know there are easy ways to style this calendar without using CSS Grid layout. However, this question is more about general knowledge of the topic rather than addressing specific examples.

Answer 1

The previous answers are very good, but I also want to mention that for grids there is an equivalent way of fixing the layout, you just need to case your tracks as minmax(0, 1fr ) instead of 1fr.

Answer 2

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

The initial sizes of grid items are min-width: auto and min-height: auto.

You can do this by setting the grid items to min-width: 0, min-height: 0 or overflow (except visible# any value other than ##) to override this behavior.

From specification:

Here is a more detailed explanation that covers flex items, but also applies to grid items:

• Why can't flex items shrink below the content size?

This article also covers

potential issues with nested containers and known rendering differences between major browsers.

---

To fix your layout, make the following adjustments to your code:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* 新增 */
  min-width: 0;   /* 新增；Firefox需要 */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* 新增 */
  min-width: 0;      /* 新增；Firefox需要 */
}

jsFiddle Demonstration

---

1fr and minmax(0, 1fr)

The above solution operates on the grid item level. For container-level solutions, see the following articles:

• Why is minmax(0, 1fr) valid but 1fr invalid for long elements?