Durante anos o meu instinto quando um design exigia um layout bidimensional real era alcançar uma pilha de contêineres flexíveis aninhados Uma fileira de cartões dentro de uma coluna dentro de outra linha, cada um flexionando, cada um lutando contra os outros por espaço Funcionou, no sentido de que os pixels eventualmente pousaram onde EU queria, mas nunca foi a ferramenta certa, e toda vez que EU tinha que mudar o design EU paguei pelo atalho A grade CSS foi construída exatamente para isso, e no dia em que EU parei de evitá-lo meu código de layout ficou mais curto e minha marcação ficou mais plana.
O que me manteve longe da grade por muito tempo foi a sintaxe. grid-template-columns: repeat(3, minmax(0, 1fr)) não é uma frase que rola para fora dos dedos, e a relação entre as faixas que declara e as caixas que aparecem não é óbvia até que tenha visto acontecer algumas dezenas de vezes Essa lacuna entre o & quot; Eu sei o que quero" e o & quot; Eu sei a propriedade que o produz" é exatamente o que um gerador fecha.
o Gerador de grade CSS permite definir o número de colunas e linhas, escolher um tamanho para cada eixo, discar nas lacunas e ajustar o alinhamento, tudo enquanto uma visualização ao vivo reflui na sua frente O CSS exato que produz o que você vê fica em uma caixa pronta para cópia embaixo Ele transforma a grade de uma especificação que você precisa memorizar em um layout que você constrói clicando em.
tl;dr: CSS Grid é um modelo de layout bidimensional que controla linhas e colunas ao mesmo tempo O contêiner o conduz
grid-template-columns,grid-template-rows,gap, e os quatro justificam e alinham propriedades Este gerador expõe todos eles, mostra uma visualização ao vivo e emite CSS limpo que usarepeat()e ofrunidade. Como a visualização é renderizada com as mesmas declarações que ela gera, o que você vê é exatamente o que você cola. Ele é executado inteiramente no seu navegador, sem inscrição.
Que problema resolve um gerador de rede CSS?
A dificuldade com o CSS Grid não é que seja complicado É que é abstracto Você descreve uma estrutura (& quot; três colunas iguais com um pouco de espaço entre elas") e o navegador calcula a geometria Essa indireção é o ponto inteiro, porque é o que faz as grades responsivas sem uma única consulta de mídia Mas a indireção é difícil de segurar na sua cabeça Você não pode olhar para repeat(3, 1fr) e sinta instantaneamente o resultado da maneira que você pode olhar para uma grade renderizada de caixas.
Um gerador colapsa o loop write-save-refresh em uma única interação Você altera a contagem de colunas e três caixas se tornam quatro Você troca uma faixa de 1fr até auto e a coluna se encaixa na largura de seu conteúdo Você levanta a lacuna e as caixas respiram Depois de dez minutos disso, a unidade de fração deixa de ser um símbolo que você traduz e se torna uma coisa que você alcança de propósito E quando você termina de explorar, você não fica com uma nota para transcrever, porque o CSS de trabalho já está escrito para você na caixa de saída.
Há um segundo benefício mais silencioso Construir o layout por manipulação força a ferramenta a emitir apenas CSS válido e bem formado Você não pode produzir um quebrado grid-template-columns valor clicando, então a saída é sempre algo que você pode colar com confiança Essa confiabilidade é a razão pela qual EU mantenho um conjunto de construtores visuais de CSS por perto, em vez de escrever todas as regras do zero.
Quais propriedades o contêiner da rede controla?
O CSS Grid, assim como o flexbox, divide a responsabilidade entre o contêiner e seus itens O contêiner define os trilhos e a estrutura geral, e é aí que a maioria das decisões de layout vive, então é onde o gerador se concentra Aqui está o que cada propriedade do contêiner faz.
| Propriedade | O que controla | Valores comuns |
|---|---|---|
grid-template-columns |
O número e tamanho das colunas | repeat(3, 1fr), 200px 1fr, auto |
grid-template-rows |
O número e o tamanho das linhas | repeat(2, auto), 100px, 1fr |
gap |
Espaço entre faixas | qualquer comprimento, por exemplo 16px ou 20px 10px |
justify-items |
Posição do item ao longo do eixo da linha | stretch, start, center, end |
align-items |
Posição do item ao longo do eixo da coluna | stretch, start, center, end |
justify-content |
Posição da pista quando a grade estiver mais estreita que seu contêiner, no eixo da linha | start, center, space-between |
align-content |
Posição da pista no eixo da coluna | start, center, space-between |
O modelo mental que faz esse bastão é a distinção entre os trilhos e os itens. grid-template-columns e grid-template-rows defina os trilhos, que são as faixas vazias da grade O vão fica entre essas faixas O justify-items e align-items as propriedades então posicionam cada item dentro da célula que ocupa, enquanto justify-content e align-content posicione todo o conjunto de faixas dentro do contêiner quando houver espaço livre O gerador mantém esses dois níveis visualmente separados para que você possa sentir a diferença entre mover um item dentro de sua célula e mover toda a grade dentro da página.
O que significa a unidade fr?
o fr unidade é a peça de CSS Grid que paga por todo o modelo, e vale a pena entender em vez de copiar Um fr representa uma fração do espaço livre no contêiner da grade depois que quaisquer tamanhos fixos e lacunas são subtraídos Se você escrever grid-template-columns: 1fr 1fr 1fr0, o recipiente' s largura disponível é dividido em três partes iguais Escreva 2fr 1fr 1fr e a primeira coluna ocupa metade do espaço enquanto as outras duas dividem o resto O navegador recalcula essas frações em cada redimensionamento, e é por isso que uma grade baseada em frações é fluida sem quaisquer pontos de interrupção.
Este é o comportamento que torna a grade superior às porcentagens para a maioria dos layouts. Um conjunto de 33.33% colunas ignora o gap e transborda, porque as porcentagens mais os gaps somam mais do que o contêiner As unidades de fração são calculadas depois que os gaps são retirados, então repeat(3, 1fr) com uma lacuna sempre se encaixa O gerador padrão para 1fr colunas exatamente por esse motivo, e você pode assistir três colunas iguais manterem suas proporções à medida que você altera a lacuna Se você quiser uma coluna que abrace seu conteúdo em vez disso, mude para auto, min-content, ou max-content e veja a diferença imediatamente.
Como faço um layout de três colunas?
Esta é uma das coisas mais comuns que as pessoas constroem com grade, e a receita é de duas linhas Defina o recipiente para display: grid e dá-lhe grid-template-columns: repeat(3, 1fr). Que produz três colunas iguais que fluem em tantas linhas quanto o conteúdo precisa Adicione a gap e você tem um layout de cartão.
No gerador, você define a contagem de colunas para três, deixe o tamanho ligado 1fr, e a antevisão apresenta uma grelha de células iguais. A caixa de saída mostra:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}
A razão pela qual vale a pena construir isso clicando em vez de digitar é que os layouts reais nunca são tão limpos Você vai querer que a barra lateral seja uma largura fixa e que o conteúdo flexione, ou que a primeira linha seja mais alta que o resto Cada uma dessas mudanças é um controle no gerador e um valor editado na saída, e você vê o efeito antes de comprometê-lo com uma folha de estilo Se você ainda estiver decidindo entre grade e uma abordagem baseada em flex para um bloco em particular, o gerador flexbox é a ferramenta complementar, e a comparação posterior neste guia explica quando cada um ganha.
Quando devo usar a grade sobre o flexbox?
Esta é a pergunta que mais importa uma vez que você conhece ambos os modelos, e a resposta honesta é que depende do número de dimensões que o layout tem Flexbox é unidimensional Ele organiza itens ao longo de um único eixo, uma linha ou uma coluna, e os envolve se você perguntar Grade é bidimensional Ele controla linhas e colunas juntas, de modo que um item pode ser posicionado tanto por sua linha quanto por sua coluna de uma só vez.
A regra prática que EU uso é esta Se EU estou colocando um conjunto de coisas em uma linha, uma barra de navegação, uma linha de tags, uma barra de ferramentas, uma pilha de campos de formulário, que é flexbox Se EU estou colocando para fora uma estrutura com ambas as linhas e colunas que precisam alinhar entre si, um shell de página com um cabeçalho, barra lateral e área de conteúdo, ou uma galeria onde cada cartão se senta em uma linha de grade limpa, que é grade Os dois não são rivais; uma célula de grade geralmente contém um recipiente flexível, e um item flexível é muitas vezes uma pequena grade Aqui é a divisão como uma tabela.
| Pergunta | Flexbox | Grade CSS |
|---|---|---|
| dimensões | Um eixo de cada vez | Linhas e colunas juntas |
| melhor para | Barras de ferramentas, navegação, linhas de itens, etiquetas de embalagem | Layouts de páginas, galerias, painéis, formulários |
| Dimensionamento impulsionado por | Conteúdo, depois distribuição | O modelo de faixa que você declara |
| Alinhamento | justify-content, align-items |
Mesmo mais justify-items, align-content |
| Uso típico | Dentro de uma célula de grade | A página geral ou quadro de seção |
O gerador torna isso concreto porque você pode construir o mesmo resultado visual nos dois sentidos e ver qual produz a regra mais limpa Para uma galeria de cartas iguais, grade com repeat() é duas linhas e flex é um recipiente de embrulho com larguras em cada criança Para uma única linha que precisa espalhar seus itens para as bordas, flexionar com space-between é o caminho mais curto.
Qual é a diferença entre gap, justify-content e align-content?
Estes três muitas vezes se confundem porque todos lidam com o espaço, mas operam em diferentes níveis O gap propriedade define o espaçamento fixo entre faixas, e é aquele que você vai usar em quase todas as grelhas Um único valor espaços linhas e colunas igualmente; dois valores definir o intervalo de linha e coluna gap separadamente, na linha de ordem, em seguida, coluna O gerador permite que você definir os dois gaps independentemente e emite a abreviação somente quando eles diferem, de modo que a saída fica tão curto quanto a situação permite.
justify-content e align-content, por outro lado, só faça qualquer coisa quando as trilhas grid' s forem menores que o contêiner, deixando espaço livre para distribuição. Se suas colunas tiverem todas as larguras de pixel fixas e não preencherem o contêiner, justify-content: center centralizará todo o bloco de trilhos e space-between vai empurrá-los para as bordas Com fr colunas que já preenchem a largura, essas propriedades não têm nada para distribuir e parecem não fazer nada, o que é uma fonte comum de confusão O gerador as omite da saída quando são deixadas no padrão start, então toda linha na regra copiada é aquela que tem um efeito visível Esse hábito de emitir apenas declarações significativas é o mesmo em que confio no gerador gradiente e o gerador caixa-sombra, porque uma regra cheia de linhas não operacionais é uma regra na qual você não pode confiar rapidamente.
Como o gerador mantém a visualização honesta?
A armadilha com qualquer construtor visual é que a visualização e o código exportado podem se afastar Uma ferramenta que renderiza sua visualização de uma maneira e gera seu código de outra maneira é pior do que inútil, porque ensina um layout que não será reproduzido Este gerador evita que, construindo tanto a visualização quanto o CSS copiado a partir de uma única lista de declarações A mesma função que decide quais propriedades emitir é aquela que estiliza as caixas de visualização, então o que você vê é exatamente o que você cola Não há caminho de renderização separado que possa discordar.
Essa escolha de design é o motivo pelo qual a saída usa repeat() para qualquer eixo com mais de uma pista Uma única pista é emitida como o tamanho nu, mas dois ou mais colapsam em repeat(n, size), que é tanto o que um humano escreveria quanto o que mantém a regra legível à medida que a contagem cresce É uma coisa pequena, mas é a diferença entre a saída que você enviaria e a saída que você reescreveria.
Construindo uma grade de cartões responsiva, passo a passo
Aqui está um fluxo de trabalho que uso frequentemente Comece com a contagem de colunas em três e o tamanho ligado 1fr. Agora você tem três colunas iguais e fluidas Defina o tamanho da linha como auto assim, cada linha cresce para caber seu cartão mais alto Elevar a lacuna para algo confortável, em torno de vinte pixels para cartões Isso é uma grade de cartão completa e responsiva, e a saída é de quatro linhas.
Para fazê-lo embrulhar por conta própria sem consultas de mídia, o próximo passo em um projeto real é trocar repeat(3, 1fr) para repeat(auto-fill, minmax(240px, 1fr)), que diz ao navegador para caber tantas colunas de 240 pixels-mínimo quanto pode e esticá-los para preencher O gerador dá-lhe o ponto de partida de contagem fixa; que uma edição transforma-lo em uma grade de auto-envolvimento Entendendo o ponto de partida é o que torna a edição óbvia, e que é todo o argumento para aprender layout construindo-o em vez de colá-lo O caso mais amplo para montar um conjunto de ferramentas que funcionam desta forma está na peça sobre o Kit de ferramentas para desenvolvedores web, e os hábitos de fluxo de trabalho por trás disso estão no Ferramentas de produtividade do desenvolve guia.
Quais navegadores suportam CSS Grid?
O CSS Grid é suportado em todos os navegadores atuais e tem sido por anos As propriedades que este gerador emite são padrão e sem prefixo, então a saída funciona no Chrome, Firefox, Safari e Edge sem prefixos de fornecedor ou fallbacks para qualquer navegador que um projeto realisticamente visa hoje gap propriedade em contêineres de grade, que foi a última peça a pousar amplamente, também é universalmente suportada agora Isso significa que o CSS que você copia está pronto para produção como escrito, o que nem sempre foi verdade nos primeiros anos da grade e é uma razão pela qual o modelo é finalmente a escolha padrão em vez de um aprimoramento progressivo Para as regras subjacentes, a especificação CSS Grid Layout Module Level 1 do W3 C é a fonte primária, e vale a pena uma leitura uma vez que o gerador lhe deu a intuição de segui-lo.
Se você estiver construindo um kit de ferramentas visuais mais amplo junto com isso, o gerador fronteira-raio e Gerador de braçadeira CSS complete o set e o Guia de ferramentas de codificação recolhe os que mais alcancei.
Perguntas frequentes
O que é um gerador de rede CSS?
Um gerador de grade CSS é uma ferramenta visual que constrói código de layout de grade CSS a partir de configurações que você escolher Você escolhe colunas, linhas, tamanhos de trilha, lacunas e alinhamento, e ele gera o CSS de modelo de grade junto com uma visualização ao vivo do resultado.
O que significa a unidade fr em CSS Grid?
A unidade fr representa uma fração do espaço livre no contêiner da grade. grid-template-columns: repeat (3, 1fr) cria três colunas que cada uma ocupa uma parcela igual da largura disponível e reflow à medida que o contêiner redimensiona.
Qual é a diferença entre CSS Grid e flexbox?
CSS Grid é um modelo bidimensional que controla linhas e colunas juntas, ideal para layouts de páginas e grades de cartões Flexbox é unidimensional, colocando itens ao longo de um único eixo, ideal para barras de ferramentas e linhas Eles são complementares e muitas vezes usados juntos.
Como faço uma grade responsiva?
Use unidades fr para que as faixas compartilhem a largura disponível, e combine repetição () com minmax () e preenchimento automático ou ajuste automático para grades que envolvem por conta própria Este gerador emite repetição () com faixas fr como ponto de partida que você pode estender.
Qual é a propriedade gap no CSS Grid?
gap define o espaçamento entre trilhas de grade. Um único valor espaça linhas e colunas igualmente; dois valores definem o intervalo de linhas e o intervalo de colunas separadamente, na ordem intervalo de linhas e depois intervalo de colunas.
O CSS da grade gerada é seguro para uso na produção?
Sim. O CSS Grid é suportado em todos os navegadores modernos e a ferramenta emite propriedades padrão e não prefixadas Todo o processamento acontece no seu navegador, então nada é carregado e a ferramenta funciona offline depois de carregada.
O Gerador de Grade CSS funciona em dispositivos móveis?
Sim. a ferramenta é totalmente responsiva e funciona em qualquer navegador moderno em telefones, tablets e desktops O CSS gerado é idêntico, independentemente do dispositivo em que você o constrói.
Este gerador de grade CSS é gratuito?
Sim. é totalmente gratuito sem inscrição, sem marcas d'água e sem limites de uso O CSS da grade que produz é seu para usar em qualquer projeto.
