Explore as diferenças entre esses métodos modernos de layout CSS com um problema prático: alinhar colunas.
Quando se trata de layouts CSS, as duas principais ferramentas à sua disposição são Grid e Flexbox. Embora ambos sejam fantásticos na criação de layouts, eles servem a propósitos diferentes e têm pontos fortes e fracos diferentes.
Aprenda como os dois métodos de layout se comportam e quando usar um em vez do outro.
O comportamento diferente do CSS Flexbox e Grid
Para ajudar a visualizar as coisas, crie um index.html arquivo na pasta de sua preferência e cole a seguinte marcação:
html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head><body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2><divclass="flex-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div><h2>Grid:h2>
<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>
Ambos os divs contêm exatamente os mesmos filhos, então você pode aplicar um sistema diferente a cada um e compará-los.
Você também pode ver que o HTML importa um arquivo de folha de estilo chamado estilo.css. Crie este arquivo na mesma pasta que index.html e cole os seguintes estilos nele:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Sua página deve ficar assim:
Agora, para virar o primeiro em uma coluna flexível, basta adicionar o seguinte código à sua folha de estilo:
.flex-container {
display: flex;
}
Este é o resultado:
O contêiner flexível div agora organiza seus elementos filhos em colunas. Essas colunas são flexíveis e responsivas — elas adaptam sua largura com base no espaço disponível na janela de visualização. Esse comportamento é um dos principais conceitos básicos por trás do Flexbox.
Para evitar transbordamento de colunas no contêiner flexível, você pode usar o envoltório flexível propriedade:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Se não houver espaço suficiente para os elementos filhos caberem em uma linha, eles serão contornados e continuarão na próxima.
Agora aplique um layout de grade ao segundo usando este CSS:
.grid-container {
display: grid;
}
Nada acontecerá apenas com a declaração acima porque o comportamento padrão do Grid cria linhas que são empilhadas umas sobre as outras.
Para mudar para uma exibição de coluna, você precisa alterar o fluxo automático de grade propriedade (que é linha por padrão):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Agora aqui está o resultado:
Para especificar o número exato de colunas que você deseja em cada linha, use colunas de modelo de grade:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Este valor cria cinco colunas de largura igual. Para obter um comportamento de empacotamento semelhante ao Flexbox, você pode usar propriedades responsivas como ajuste automático e mínimo máximo:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Freqüentemente, você ouvirá Flexbox e Grid serem chamados de unidimensionais e bidimensionais, respectivamente. Isso não é toda a verdade, porque tanto o Flexbox quanto o Grid podem fazer um sistema de layout bidimensional. Eles apenas fazem isso de maneiras diferentes, com restrições diferentes.
O mais importante é a maneira como você pode controlar o aspecto unidimensional do layout. Considere a seguinte imagem, por exemplo:
Observe quão consistente é a coluna Grid e quão desigual é cada coluna no Flexbox. Cada linha/coluna em um flex container é independente uma da outra. Portanto, alguns podem ser maiores que outros, dependendo do tamanho do conteúdo. Eles são menos parecidos com colunas e mais com blocos independentes.
A grade funciona de maneira diferente, configurando uma grade 2D com colunas bloqueadas por padrão. Uma coluna com texto curto terá o mesmo tamanho de outra com texto muito mais longo, como demonstra a imagem acima.
Em resumo, CSS Grid é um pouco mais estruturado, enquanto Flexbox é mais sistema de layout flexível e responsivo. Esses sistemas de layout alternativos têm um bom nome!
Quando usar o Flexbox
Deseja contar com o dimensionamento intrínseco de cada coluna/linha, conforme definido pelo seu conteúdo? Ou você quer ter um controle estruturado da perspectiva dos pais? Se a sua resposta for a primeira, então o Flexbox é a solução perfeita para você.
Para demonstrar isso, considere um menu de navegação horizontal. Substitua a marcação dentro do tags com isso:
<h1>Flexbox vs. Gridh1><headerclass="flex">
<h2>Flexboxh2><nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header><headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>
Substitua a marcação no arquivo CSS por isto:
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}
Aqui está o resultado:
Agora, transforme a primeira navegação em um layout flexível e a segunda em um layout de grade adicionando o seguinte CSS:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Compare os resultados para ver qual foi mais adequado:
Pela imagem acima você pode ver que o Flexbox é a solução perfeita neste caso. Você tem itens que deseja colocar um ao lado do outro e manter seu tamanho intrínseco (grande ou pequeno dependendo do comprimento do texto). Com o Grid, cada célula tem uma largura fixa e não parece tão boa – pelo menos com links de texto simples.
Quando usar grade CSS
Um lugar onde o Grid realmente se destaca é quando você deseja criar um sistema rígido a partir do pai. Um exemplo é um conjunto de elementos de cartão que devem ser igualmente amplos, mesmo que contenham quantidades diferentes de conteúdo.
Substitua a marcação dentro do tags com isso:
<h1>Flexbox vs. Gridsh1><sectionclass="cards">
<h2>Some cardsh2><divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>
Adicione este CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Você está começando com um display Flexbox para ver sua aparência e compará-lo com o display de grade. Aqui está o resultado:
Observe como a última coluna é maior que as outras devido ao seu dimensionamento intrínseco, que é o que o Flexbox lida bem. Mas para torná-los da mesma largura usando o Flexbox, você teria que ir contra esse dimensionamento intrínseco adicionando o seguinte:
.columns > * {
flex: 1;
}
Isso funciona. Mas o Grid é mais adequado para casos como este. Basta especificar o número de colunas e pronto:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Aqui está o resultado:
Outra vantagem de usar o Grid é que o pai controla o layout dos filhos. Assim, você pode adicionar e remover elementos filhos sem se preocupar em quebrar o layout.
Então, quando você deve usar Grid ou Flexbox?
Em resumo, CSS Grid é ótimo quando você deseja um controle estruturado da perspectiva do pai, com tamanhos iguais de colunas, independentemente do tamanho de seu conteúdo individual.
Já o Flexbox é ideal quando se deseja um sistema mais flexível baseado no dimensionamento intrínseco dos elementos.
