grid responsivo CSS sem media query
A combinação `grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))` é provavelmente a linha de CSS mais reaproveitada em grids de cards modernos. Ela diz ao navegador para caber quantas colunas de no mínimo 220px couberem na largura disponível, e esticar as que sobrarem até preencher o espaço, tudo recalculado automaticamente a cada redimensionamento, sem um único `@media`.
Mínimo baixo encaixa mais colunas por linha, bom para grids densos de imagens pequenas.
Mínimo mais alto garante espaço de leitura confortável dentro de cada card.
Porcentagem calcula sobre a largura total do container. `fr` distribui o espaço que sobra depois de reservar as trilhas de tamanho fixo (px, minmax mínimo), por isso `1fr 200px` deixa a primeira coluna ocupar tudo que não foi usado pelos 200px, algo que porcentagem sozinha não consegue expressar.
Para grids de cards, auto-fit é quase sempre a escolha certa: quando há poucos itens, ele deixa as colunas existentes esticarem para preencher a linha. auto-fill mantém "fantasmas" de colunas vazias reservadas, o que deixa poucos cards agrupados à esquerda com espaço em branco ao lado.
Sim, mas com uma ressalva: como o número de colunas é dinâmico, um `grid-column: span 2` fixo pode se comportar de forma inesperada em larguras onde só existe 1 coluna. Teste o item destacado nas larguras extremas antes de fixar o span.
gap aceita qualquer unidade CSS, incluindo `clamp()`. Um `gap: clamp(0.75rem, 2vw, 1.5rem)` deixa o espaçamento entre cards crescer levemente em telas maiores, mantendo a mesma lógica "sem media query" do resto do grid.
Clique em um item para selecioná-lo, arraste para mover ou use a alça no canto para redimensionar.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}O CSS é gerado localmente no navegador.