Resultados da pesquisa a pedido "css-grid"
Áreas de grade não dispostas corretamente no CSS Grid
Quero criar meu site usando o sistema de grade CSS, mas parece não estar funcionando. Aqui está o meu código: .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "logo faq" "about-us"; } ...
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 ...
Largura do elemento mais largo define a largura de todos os irmãos na linha
Eu já li muitos tutoriais sobre CSS flex boxes e grades de CSS, mas, francamente, não consigo descobrir como fazer essa coisa simples (?). Tudo o que eu quero é que os elementos em um contêiner sejam tão amplos quanto o elemento mais amplo. Eu ...
O que é uma alternativa ao subgrid css?
Estou trabalhando em uma página com um layout bastante simples - basicamente uma tabela de dados, mas usando o layout da grade para que as colunas se ajustem perfeitamente, dependendo do tamanho do conteúdo. Quero tornar as linhas classificáveis ...
Como ocultar linhas de grade implícitas?
O snippet abaixo usa CSS Grid para aumentar o número de colunas para contêineres largos. Para recipientes estreitos (por exemplo, descomentewidth: 80vw ou redimensionar o exemplo), ele adiciona linhas implícitas (apenas 2 são explícitas ...
minmax () padronizado como max
Eu tentei definirminmax() para ogrid-template-rows e, curiosamente, o resultado foi que as linhas de grade se estenderam ao máximo dominmax() em vez de min. Como poderíamos fazer com que as linhas da grade permanecessem no tamanho ...
Flexbox: flex-start, auto-start e start; Qual é a diferença?
Acabei de notar alguns valores doalign-self propriedade que eu não vi antes. O que sãostart, end, self-starteself-end e quais são suas diferençasflex-start eflex-end? Eu tenho me referido ao guia em ...
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 ...
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 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 ...