Impedir que o conteúdo expanda itens de grade

TL; DR: Existe algo parecido table-layout: fixedcom grades CSS?

Tentei criar um calendário de exibição do ano com uma grande grade 4x3 durante os meses e aninhar grades 7x6 durante os dias.

O calendário deve preencher a página, para que o contêiner da grade do ano tenha uma largura e altura de 100% cada.

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

Aqui está um exemplo de trabalho: https://codepen.io/loilo/full/ryXLpO/

Por uma questão de simplicidade, todos os meses nessa caneta têm 31 dias e começam na segunda-feira.

Também escolhi um tamanho de fonte ridiculamente pequeno para demonstrar o problema:

Os itens de grade (= células do dia) são bastante condensados, pois existem várias centenas na página. E assim que os rótulos dos números do dia ficarem muito grandes (sinta-se à vontade para brincar com o tamanho da fonte na caneta usando os botões no canto superior esquerdo), a grade aumentará de tamanho e excederá o tamanho do corpo da página.

Existe alguma maneira de impedir esse comportamento?

Inicialmente, declarei que minha grade do ano tem 100% de largura e altura, então esse é provavelmente o ponto de partida, mas não consegui encontrar nenhuma propriedade CSS relacionada à grade que atendesse a essa necessidade.

Isenção de responsabilidade: estou ciente de que existem maneiras muito fáceis de estilizar esse calendário sem usar o CSS Grid Layout. No entanto, essa pergunta é mais sobre o conhecimento geral sobre o tema do que resolver o exemplo concreto.

Por padrão, um item de grade não pode ser menor que o tamanho do seu conteúdo.

Os itens de grade têm um tamanho inicial de min-width: autoe min-height: auto.

Você pode substituir esse comportamento definindo itens grade para min-width: 0, min-height: 0ou overflowcom qualquer valor diferente de visible.

Das especificações:

6.6 Tamanho mínimo automático de itens de grade

Para fornecer um tamanho mínimo padrão mais razoável para itens de grade, esta especificação define que o autovalor de min-width/ min-heighttambém aplica um tamanho mínimo automático no eixo especificado aos itens de grade que overflowsão visible. (O efeito é análogo ao tamanho mínimo automático imposto aos itens flexíveis.)

Aqui está uma explicação mais detalhada sobre os itens flex, mas também se aplica aos itens da grade:

• Por que os itens flexíveis não diminuem o tamanho do conteúdo passado?

Esta postagem também aborda possíveis problemas com contêineres aninhados e diferenças de renderização conhecidas entre os principais navegadores .

Para corrigir seu layout, faça estes ajustes no seu código:

.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 */
}

codepen revisado

1fr vs minmax(0, 1fr)

A solução acima opera no nível do item da grade. Para uma solução em nível de contêiner, consulte esta postagem:

• Como o minmax (0, 1fr) funciona para elementos longos, enquanto 1fr não funciona?

A resposta anterior é muito bom, mas eu também queria mencionar que não é um equivalente layout fixo para as redes, você só precisa escrever minmax(0, 1fr)em vez de 1frcomo o seu tamanho pista.

As respostas existentes resolvem a maioria dos casos. No entanto, deparei-me com um caso em que precisava estar o conteúdo da célula da grade overflow: visible. Eu o resolvi posicionando-o absolutamente dentro de um invólucro (não ideal, mas o melhor que eu sei), assim:

.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

uma coisa mais fácil de fazer é definir a largura máxima do item de grade da seguinte maneira:

//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
  }