Uma compreensão sólida de Flexbox e CSS Grid é necessária se você deseja criar sites impressionantes e responsivos.
Se você escreve CSS há algum tempo, é bem provável que pelo menos já tenha ouvido falar desses termos. Você pode até ter usado um ou ambos em algum grau. Ambos são partes poderosas do CSS, com casos de uso semelhantes, mas sutilmente diferentes.
O que é Flexbox?
Flexbox é um método de layout CSS unidimensional que já existe há algum tempo. Você pode pensar no Flexbox como um monte de propriedades CSS relacionadas que você pode usar para alinhar elementos HTML em um contêiner e gerenciar o espaço entre eles.
Antes do Flexbox, esse tipo de layout exigia o uso frustrante e pesado do float e propriedades de posição.
Se você está preocupado com o suporte do navegador para o Flexbox, não fique. De acordo com caniuse.com, todos os navegadores modernos oferecem suporte ao Flexbox.
O básico do Flexbox
Enquanto Flexbox inclui muitas propriedades CSS, o básico é bem simples. O uso do Flexbox sempre começa declarando um container pai como um flex-container adicionando
Exibição: flexível às suas regras de estilo. Fazer isso automaticamente torna todos os filhos desse elemento flex-items.Depois disso, você pode controlar a distribuição de espaço dentro do flex-container usando o propriedade de conteúdo justificado. Você pode controlar o alinhamento de itens flexíveis com o itens de alinhamento propriedade.
Aqui está um exemplo de código que usa o Flexbox para espalhar o espaço em um contêiner uniformemente entre seus filhos e alinhá-los todos no centro do contêiner. Este é o HTML:
<classe div ="recipiente">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Este é o CSS:
.recipiente {
exibição: flexível;
largura: 100%;
justificar-conteúdo: espaço ao redor;
itens de alinhamento: centro;
borda: 1px preto sólido;
altura: 200px;
}
.recipiente > div {
altura: 100px;
largura: 100px;
cor de fundo: vermelho;
cor branca;
tamanho da fonte: 5rem;
alinhamento de texto: centro;
raio da borda: 5px;
}
E aqui está a saída:
O que é grade CSS?
CSS Grid é um sistema de layout complementar ao Flexbox. Flexbox é poderoso, mas não muito adequado para certos tipos de layouts. Tentar definir a estrutura de uma página inteira com o Flexbox acabará sendo uma tarefa frustrante envolvendo marcações feias e não-semáticas e CSS hackeado.
O CSS Grid não é um substituto do Flexbox, mas sim um sistema alternativo para algumas situações.
O suporte para CSS Grid não é tão extenso quanto para Flexbox, mas Grid é razoavelmente bem suportado em 2022.
O básico da grade CSS
O conceito de Grid é simples. Como o nome sugere, o CSS Grid permite dividir o espaço em um contêiner pai em uma grade de linha e coluna, com qualquer número de linhas/colunas que você desejar. Depois disso, você especifica a posição dos itens filhos referenciando as linhas da grade do pai.
Comece adicionando exibição: grade para o contêiner pai. Então use o grade-modelo-linhas e grade-modelo-colunas properties para especificar as linhas e colunas nas quais você deseja dividir a grade. Você pode então usar o grade-coluna e linha de grade propriedades nos elementos filhos para dizer onde eles deveriam estar na grade. Vejamos um exemplo de grade que usa a configuração de cinco elementos anterior, mas em um arranjo mais complicado.
Aqui está o HTML:
<classe div ="recipiente">
<div>1</div>
<classe div ="dois">2</div>
<classe div ="três">3</div>
<classe div ="quatro">4</div>
<classe div ="cinco">5</div>
</div>Aqui está o CSS:
.recipiente {
exibição: grade;
largura: 100%;
grade-modelo-linhas: repita (3, 1fr);
grade-modelo-colunas: repetir (3, 1fr);
brecha: 0.5rem;
borda: 1px preto sólido;
altura: 300px;
}.recipiente > div {
cor de fundo: vermelho;
cor branca;
tamanho da fonte: 5rem;
alinhamento de texto: centro;
raio da borda: 5px;
}
.recipiente > .dois {
grade-linha: 2;
grade-coluna: 2;
}
Aqui está a saída:
O CSS Grid também inclui uma boa quantidade de outras propriedades que você pode usar para criar layouts mais complexos.
Qual deles você deve usar?
Primeiramente, é importante observar que nada impede você de usar Flexbox e Grid juntos e, em alguns casos, essa é a escolha ideal. Dito isso, vamos responder à questão de quais layouts cada um desses sistemas é mais adequado para implementar.
O Flexbox é mais adequado para a construção de layouts que envolvem alinhamento e distribuição de elementos em uma única linha. Exemplos desse tipo de layout são alinhar ícones no final de uma seção ou organizar os links em uma barra de navegação.
A grade, por outro lado, brilha mais quando você precisa posicionar elementos com precisão em relação aos outros (tanto na horizontal quanto na vertical), e você precisa desse posicionamento para se adaptar facilmente a vários tamanhos de tela.
Para demonstrar, aqui está o código que você precisa escrever para recriar o layout do exemplo Grid com Flexbox.
O HTML:
<classe div ="recipiente">
<classe div ="sub um">
<div>1</div>
<div>5</div>
</div><classe div ="sub dois">
<div>2</div>
</div>
<classe div ="sub três">
<div>4</div>
<div>3</div>
</div>
</div>
O CSS:
.recipiente {
borda: 1px preto sólido;
altura: 300px;
}.sub {
exibição: flexível;
largura: 100%;
}.um, .três {
justificar-conteúdo: espaço-entre
}.dois {
justificar-conteúdo: centro;
}
.sub > div {
altura: 100px;
largura: 100px;
cor de fundo: vermelho;
cor branca;
tamanho da fonte: 5rem;
alinhamento de texto: centro;
raio da borda: 5px;
}
E aqui está a saída:
A principal observação aqui é que, embora esse código produza a mesma saída do exemplo Grid, a marcação aqui é significativamente mais complicada. A implementação desse layout requer subcontêineres e você deve colocar os divs numerados fora de ordem na marcação.
Além disso, suponha que você precisava mudar esse layout para uma posição estranha: digamos, alinhando o 5º div com o 2º. Se você tivesse usado o Flexbox para isso, teria que recorrer a posição: relativa ou algo semelhante. Usando o Grid, tudo que você precisa é mudar o grade-coluna propriedade.
Mas, por outro lado, implementar o alinhamento simples de linha única do exemplo Flexbox com Grid resultaria em muito mais CSS. A grade é obviamente menos adequada para esse tipo de layout.
Embora o Flexbox e o Grid possam replicar os efeitos um do outro, existem algumas exceções. Fazer elementos se sobreporem é muito difícil apenas com o Flexbox, mas é muito fácil com o Grid. A grade também não permite que os elementos se afastem de outros elementos com margin: auto como o Flexbox faz.
Flexbox e Grid são sistemas de layout poderosos
Flexbox e CSS Grid são sistemas de design que facilitam o layout do conteúdo da sua página da web. A grade é melhor para layouts bidimensionais com muitos elementos que precisam ser posicionados com precisão uns em relação aos outros. O Flexbox é melhor para layouts unidimensionais ou de linha única, onde você só precisa espaçar vários elementos de uma determinada maneira.
