Evitar que o conteúdo expanda os itens da grade

TL; DR: Existe alguma coisa como table-layout: fixed para grades CSS?


Eu tentei criar um calendar de visualização de ano com uma grande grade de 4×3 para os meses e aí aninhadas 7×6 grades para os dias.

O calendar deve preencher a página, para que o contêiner de grade de ano obtenha 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 prático : https://codepen.io/loilo/full/ryXLpO/

Por simplicidade, todos os meses nessa pena tem 31 dias e começa na segunda-feira.

Eu 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 há várias centenas deles na página. E assim que os labels dos números dos dias se tornarem 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 evitar esse comportamento?

Eu declarei inicialmente que minha grade de ano tem 100% de largura e altura, então é provável que seja o ponto de partida, mas não encontrei nenhuma propriedade CSS relacionada à grade que pudesse atender a essa necessidade.

Disclaimer: Estou ciente de que existem maneiras bem fáceis de estilizar esse calendar sem usar o CSS Grid Layout. No entanto, essa questão é mais sobre o conhecimento geral sobre o tópico do que a solução do exemplo concreto.

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

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

    Você pode replace esse comportamento configurando os itens da grade como min-width: 0 , min-height: 0 ou overflow com qualquer valor que não seja visible .

    Da especificação:

    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, essa especificação define que o valor auto de min-width / min-height também aplica um tamanho mínimo automático no eixo especificado aos itens de grade cujo overflow é 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íveis, mas também se aplica aos itens da grade:

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

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


    Para corrigir seu layout, faça esses 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