TL; DR: Existe algo parecido table-layout: fixed
com 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.
fonte
Respostas:
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: auto
emin-height: auto
.Você pode substituir esse comportamento definindo itens grade para
min-width: 0
,min-height: 0
ouoverflow
com qualquer valor diferente devisible
.Das especificações:
Aqui está uma explicação mais detalhada sobre os itens flex, mas também se aplica aos itens da grade:
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:
codepen revisado
1fr
vsminmax(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:
fonte
min-width: 0;
não ajuda. Estou esquecendo de algo?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 de1fr
como o seu tamanho pista.fonte
minmax(0, 1fr)
funciona porque1fr
é realmente uma abreviação deminmax(auto,1fr)
, que não é o valor correto para a pergunta original.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:https://codepen.io/bjnsn/pen/vYYVPZv
fonte
uma coisa mais fácil de fazer é definir a largura máxima do item de grade da seguinte maneira:
fonte