Resultados da pesquisa a pedido "css-grid"
Como especificar o número máximo de colunas que o repeat () criará usando o ajuste automático / preenchimento?
Há algum jeito, sem usar a consulta de mídia, para limitar o número de colunas criadas e combiná-las com o ajuste / preenchimento automático? Por exemplo grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); Cria um layout maravilhoso e ...
Grade com altura da janela de exibição e rolagem interna div
Estou tentando criar um layout que usa uma grade que ocupa toda a janela de exibição do navegador height: 100vh) e, em seguida, permite que uma div em um dos itens da grade role na dimensão Y. Aqui está um exemplo de código. Existem três áreas ...
Como nivelar divs aninhados para exibi-los em uma grade CS
Giro uma tabela (com vue.js) a partir de um objeto que deveria ter duas colunas de largura. Cada uma das colunas vem da chave e do valor do objeto. Isso é equivalente ao seguinte HTML real: <div id="table"> <div> <div> this is something long on ...
omo calcular () o número de linhas em um modelo de grad
Gostaria de calcular o número de linhas em um modelo de grade usandocalc(), mas tentando obter orepeat contagem com divisão não está funcionando: .grid { display: grid; grid-gap: 10px; grid-template-columns: 1fr; margin-bottom: 10px; ...
Como fazer com que os itens na última linha consumam espaço restante na CSS Gri
Existe uma maneira de forçar todos os itens na última linha, de uma grade, a preencher a linha, não importa quantos seja Não sei o número de itens que estarão na grade, portanto não posso direcioná-los diretamente. Eu tentei ...
Como forçar essa grade CSS para quebrar em uma nova linha sem especificar tamanhos minma
Vim de um histórico pesado de div / float para criar sites responsivos (por exemplo, Bootstrap 3, Foundation) e usei o Flex box brevemente, mas tenho tentado usar o Grid em todos os lugares, pois é realmente ótimo para resolver vários problemas. ...
Como repetir um padrão de layout de grade CSS?
Estou tentando fazer um layout de grade repetindo 2 seções verticais e 2 horizontais. Depois, 2 horizontais, 2 verticais e repetimos novament Como isso .container { max-width:940px; margin: 0 auto; } .grid-container { counter-reset: div; ...
Como o minmax (0, 1fr) funciona para elementos longos, enquanto 1fr não funcion
Então eu tenho essa grade: +---------+------------------------------+---------+ | <div> | <p> - 1000 characters long | <div> | +---------+------------------------------+---------+ Dentrop há uma string super longa sem espaços.divs são espaços ...
Por que o conteúdo mínimo não funciona com preenchimento automático ou ajuste automático?
Basicamente, eu não entendo por que isso funciona: .grid { display: grid; grid-template-columns: repeat(4, min-content); }Mas isso não funciona: .grid { display: grid; grid-template-columns: repeat(auto-fill, min-content); } Realmente desejo ...
grade de exibição e posição fixa fica fora do corpo
.parent { position:fixed; width:100%; left:0; top:14px; display:grid; grid-template-columns:40% 60%; grid-gap:5px; background:#eee; } .left { border:2px solid red; } .right { border:2px solid red; }<div class='parent'> <div ...