É possível fazer um envoltório de grade CSS sem usar consultas de mídia?
No meu caso, tenho um número não determinístico de itens que desejo colocados em uma grade e quero que essa grade seja quebrada. Usando o Flexbox, não consigo espaçar bem as coisas de maneira confiável. Eu gostaria de evitar um monte de consultas de mídia também.
Aqui está um exemplo de código :
.grid {
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
grid-template-columns: 186px 186px 186px 186px;
}
.grid > * {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>E aqui está uma imagem GIF:
Como uma observação lateral, se alguém puder me dizer como eu poderia evitar especificar a largura de todos os itens como estou com grid-template-columnsisso, seria ótimo. Eu prefiro que os filhos especifiquem sua própria largura.
grid-template-columns: auto auto auto auto;funciona neste caso? =)Respostas:
Use
auto-fillouauto-fitcomo o número de repetição darepeat()notação.auto-fillA grade irá repetir tantas trilhas quanto possível sem estourar seu contêiner.
Neste caso, dado o exemplo acima (veja a imagem) , apenas 5 trilhas podem caber no contêiner da grade sem transbordar. Existem apenas 4 itens em nossa grade, então um quinto é criado como uma trilha vazia dentro do espaço restante.
O resto do espaço restante, faixa # 6, termina a grade explícita. Isso significa que não havia espaço suficiente para colocar outra faixa.
auto-fitA
auto-fitpalavra-chave se comporta da mesma forma queauto-fill, exceto que após o algoritmo de posicionamento do item da grade, quaisquer trilhas vazias dentro do espaço restante serão reduzidas para0.A grade ainda irá repetir tantas trilhas quanto possível sem estourar seu contêiner, mas as trilhas vazias serão recolhidas
0.Uma pista colapsada é tratada como tendo uma função fixa de dimensionamento de pista
0px.Ao contrário do
auto-fillexemplo de imagem, a quinta faixa vazia é recolhida, terminando a grade explícita logo após o 4º item.auto-fillvsauto-fitA diferença entre os dois é perceptível quando o
minmax()função é usada.Use
minmax(186px, 1fr)para variar os itens de186pxa186pxmais uma fração do espaço restante no contêiner da grade.Ao usar
auto-fill, os itens vão crescer, uma vez que não há espaço para colocar faixas vazias.Ao usar
auto-fit, os itens crescerão para preencher o espaço restante, pois todas as trilhas vazias serão reduzidas0px.Parque infantil:
CodePen
Inspecionando faixas de preenchimento automático
Inspecionando faixas de ajuste automático
fonte
display: griduso do elementojustify-content: centerrepeat(auto-fill, minmax(186px, 1fr));não é pixels, mas contanto que o div tenha texto dentro?Você quer uma
auto-fitouauto-filldentro darepeat()função:A diferença entre os dois se torna aparente se você também usar um
minmax()para permitir tamanhos de coluna flexíveis:Isso permite que suas colunas sejam flexíveis em tamanho, variando de 186 pixels a colunas de largura igual que se estendem por toda a largura do contêiner.
auto-fillcriará tantas colunas quantas caber na largura. Se, digamos, caber cinco colunas, mesmo que você tenha apenas quatro itens de grade, haverá uma quinta coluna vazia:Usar em
auto-fitvez disso evitará colunas vazias, estendendo ainda mais as suas, se necessário:fonte
Você pode estar procurando por
auto-fill:Demo: http://codepen.io/alanbuchanan/pen/wJRMox
Para usar o espaço disponível com mais eficiência, você pode usar
minmaxe passarautocomo o segundo argumento:Demo: http://codepen.io/alanbuchanan/pen/jBXWLR
Se você não quiser as colunas vazias, pode usar em
auto-fitvez deauto-fill.fonte
Eu tive uma situação semelhante. Além do que você fez, eu queria centralizar minhas colunas no contêiner, embora não permitisse que colunas vazias fossem para a esquerda ou direita:
fonte
Aqui está minha tentativa. Com licença, eu estava me sentindo extremamente criativo.
Meu método é um pai
divcom dimensões fixas . O resto é apenas ajustar o conteúdo dentro dessa div de acordo.Isso redimensionará as imagens, independentemente da relação de aspecto. Não haverá corte difícil também.
fonte