Resultados da pesquisa a pedido "css-grid"
Posso ter um número variável de colunas por linha em uma grade CSS?
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; grid-auto-rows: 60px; grid-gap: 15px; } .col { background-color: tomato; }<div class="grid"> <div class="col"></div> <div class="col"></div> <div ...
O layout da grade CSS no Chrome parece não funcionar corretamente com mais de 1000 linhas
Eu criei um exemplo de uma grade deslizante com cabeçalhos fixos, usando as tecnologias "CSS Grid Layout" e "sticky position". Por conveniência, o conteúdo da grade é gerado por um script, que acho que funciona bem. function fillGrid(selector, ...
Como obter itens de grade de diferentes comprimentos para quebrar?
Com orepeat() eauto-fit / auto-fill funções é fácil obter itens de grade para quebrarquando houver um padrão de comprimento definido para as colunas ou linhas. No exemplo abaixo, todas as colunas têm largura mínima de 100px e largura máxima de ...
Tornando o conteúdo dentro dos itens da grade igual altura na CSS Grid
Estou tentando descobrir como obter duas colunas da minha grade da mesma altura. Aqui está o que eu estou procurando: xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx x qqqqqqqqqqqqq x x qqqqqqqqqqqqqqq x x qqqqqqqqqqqqq x x qqqqqqqqqqqqqqq x x x x ...
Um layout de grade com quadrados responsivos
Estou querendo criar um layout de grade com quadrados responsivos. Eu sinto que deveria ser capaz de fazer isso com o layout CSS Grid, mas com problemas para definir a altura de cada quadrado como igual à largura. Também está tendo problemas ...
Como direcionar uma coluna ou linha específica no CSS Grid Layout?
É possível selecionar uma coluna ou linha específica da grade com CSS? Por exemplo, digamos que eu tenho um layout de grade CSS de 3 linhas por 2 colunas:grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. Como selecionaria todos ...
Como centralizar elementos na última linha da CSS Grid?
Estou usando a grade CSS para fazer o layout de alguns itens como este ... #container { display: grid; grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%; } .item { background: teal; color: white; padding: 20px; margin: ...
Controlando o tamanho de uma imagem em um layout de Grade CSS
Eu tenho um layout de grade CSS com várias áreas e um contêiner de fotos. Não sei como: controlar o tamanho da foto, para que ela fique dentro da área da grade mantenha a largura da foto em 100% (portanto, igual ao seu contêiner) e dimensione ...
Suporte do navegador para CSS Grid [fechado]
Qual é a situação de suporte do navegador em relação à CSS Grid? Estou olhando em volta e tendo dificuldade para entender toda a imagem sobre compatibilidade. Se eu for paraEu posso usar [http://caniuse.com/#search=css%20grid], parece que quase ...
Layout de grade css responsivo com itens de largura máxima
Estou procurando uma maneira de gerar automaticamente uma grade, que sempre preencha o espaço disponível, enquantoencolhendoos itens até que outro item possa ser adicionado. A maioria das implementações de grade responsivas usa algo que vincula ...