CSS GRID: Definindo um número máximo de colunas sem consultas de mídia

while while white shass: A largura da tela muda?

Responder:

Sim, usando a grade CSS, podemos conseguir isso sem o uso de javascript ou consultas de mídia. Essa abordagem utiliza o conceito de colunas de ajuste automático:

solução:

Crie um recipiente de grade com a propriedade Display: Grid. Auto-ajuste, use minmax (max (largura, 100%/n), 1fr) para especificar o comportamento da coluna. Width.

1fr define a largura da coluna padrão como 1 fração do espaço restante. Os elementos serão agrupados automaticamente para novas linhas conforme necessário. --n: 4; / * O número máximo de colunas */ Exibição: grade; colunas de grade-template: repetir (preenchimento automático, minmax (max (200px, 100%/var (-n)), 1fr)); }

Exemplo:
3. No exemplo a seguir, um contêiner de grade é criado com um máximo de 4 colunas e os elementos envolvem: novas linhas como a largura da tela muda, sem a necessidade de consultas de mídia.