Qualquer pessoa que tenha desenvolvido pelo menos um pouco de desenvolvimento de site sabe que as tags
<div> são um elemento essencial para controlar o layout.
O HTML5 introduziu novos elementos semânticos para ajudar nisso. E embora eles sejam uma adição fantástica ao idioma, eles são um pouco como decorar nossa sopa com elementos
<div> .
Com o advento do CSS Grid, não precisamos mais confiar nos elementos
<div> para criar estrutura de página ou componente ainda mais complexo. A estrutura é literalmente determinada pelo elemento pai, não pela maneira como o conteúdo está localizado dentro dele.
Isso significa que podemos obter um layout simples e agradável que estrutura o conteúdo sem prestar atenção em como ele foi originalmente organizado usando os elementos
<div> .
CSS Grid pode ser complicado, mas o Flexbox também
Ouvi muitas pessoas reclamarem que o Grid é muito complexo e que o Flexbox faz o mesmo trabalho. Eu diria que eles são confortáveis com o Flexbox e, portanto, não desejam aprender mais sobre CSS Grid.
A tecnologia CSS Grid apresenta muitas novas propriedades e valores; portanto, existe uma curva de aprendizado. Mas o Flexbox também é bastante complicado.
Você pode falar sobre os benefícios de usar a propriedade
flex-basis em vez da
width ? Ou como o Flexbox calcula a largura dos elementos flex, se não o definimos explicitamente?
Por exemplo, se você mostra o exemplo abaixo para alguém que nunca usou o Flexbox, como explica o fato de ele ter o mesmo layout e estilos para os dois conjuntos de colunas? Para piorar, a segunda coluna em ambos os casos tem 50% de largura. Obviamente, uma largura de 50% não define realmente o tamanho do elemento para 50%.
“Bem, tudo começa com o fato de os elementos serem compactados se não houver espaço suficiente no contêiner; portanto, mesmo se definirmos a largura do elemento = 50%, ele não tem espaço suficiente, então começa a ser compactado para se espremer no contêiner, pois o outro
<div> requer mais espaço. 50% é mais provável o tamanho ideal para o bloco, mas não o tamanho real. ”
“Assim, no exemplo acima, o conteúdo do primeiro bloco é tão grande que cria um problema, porque, como elemento flexível, por padrão, ele tende a encolher para acomodar o conteúdo. Neste exemplo, esse elemento tem muito conteúdo, então ...
Então, sim, o flexbox é ótimo e faz um ótimo trabalho na criação de layouts, mas por favor não me diga que é simples. Assim que você passa dos exemplos ideais para as tarefas de trabalho, esse comportamento geralmente está longe de ser uma compreensão intuitiva e, às vezes, pode ser francamente estranho.
Uma grade é complexa, pois envolve muitas novas propriedades e valores, mas eles nos dão muito mais controle do que o flexbox.
Neste artigo, gostaria de considerar como esse nível adicional de controle ajuda a simplificar nossa marcação e nos permite escrever menos código, tudo sem precisar aprender a usar várias funções bizarras.
Limitações do Flexbox
Mesmo se pegarmos um componente simples e criá-lo usando o flexbox, devido ao fato de ele atuar em apenas uma dimensão (os elementos flexíveis são linhas ou colunas, eles não podem ser os dois), temos muito o número de elementos usados para criar linhas, que podem ser divididas em colunas.
Por exemplo, se estamos trabalhando em um cartão como este:
Esse não é um layout complicado, mas ainda precisamos organizar nosso conteúdo de uma maneira bastante específica para fazê-lo funcionar.
Os blocos amarelo e laranja nessa situação são necessários para que, ao adicionar a propriedade display: flex para o elemento .card (bloco vermelho), sejam criadas duas colunas. Assim, para estruturar todo o conteúdo, obtemos uma marcação semelhante à seguinte:
<div class="card"> <div class="profile-sidebar"> </div> <div class="profile-body"> </div> </div>
Depois de entender como o Flexbox funciona, será fácil entender essa estrutura.
Quando adicionamos a propriedade
display: flex ao elemento
.card , obtemos duas colunas, após as quais precisaremos estilizar cada uma delas separadamente.
Aqui está um exemplo de trabalho com todos os estilos:
O fato é que, quando criamos colunas de conteúdo, temos uma marcação um pouco mais complicada e também nos limitamos, pois forçamos diferentes partes do conteúdo a serem agrupadas.
Simplifique tudo com CSS Grid
Como o CSS Grid é bidimensional, nos permite criar linhas e colunas ao mesmo tempo, o que significa que o contêiner de grade (no qual definimos a propriedade
display: grid ) tem controle total sobre o layout interno.
Anteriormente, isso exigia elementos adicionais, como no exemplo do Flexbox acima. Usando o Grid, podemos nos livrar completamente deles.
<div class="card"> <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img"> <ul class="social-list"> ... </ul> <h2 class="profile-name">Ramsey Harper</h2> <p class="profile-position">Graphic Designer</p> <p class="profile-info">Lorem ipsum ...</p> </div>
Do ponto de vista da marcação, isso não faz mais sentido?
Existe um elemento com a classe
.card no qual colocamos seu conteúdo imediato. Não precisamos nos preocupar com a estrutura e o layout dos elementos, apenas colocamos o conteúdo de que precisamos e seguimos em frente.
Estruturando o layout
Assim como ao usar o Flexbox, ainda precisamos estruturar o layout, embora, devido às especificidades do Grid, ele pareça um pouco diferente.
Essa é uma das situações em que as pessoas podem argumentar que o Grid é mais complicado, mas, na verdade, eu apenas traço blocos em torno de cada conteúdo.
Usando o Flexbox, criamos dois blocos que se destacaram como colunas. Ao usar a grade, em vez disso, configuramos a grade inteira para o elemento pai e, em seguida, indicamos aos elementos filhos onde se sentar nessa grade.
Para configurar a grade, podemos fazer algo assim:
.card { display: grid; grid-template-columns: 1fr 3fr; }
A unidade de medida fr é exclusiva da Grade e indica a proporção de espaço disponível. Esse uso é muito semelhante à instalação de duas colunas no Flexbox e à determinação de suas larguras de 25% e 75%, respectivamente.
Colocando itens em uma grade
Talvez devido ao fato de que durante muitos anos eu usei float para criar marcações, agora situações em que os elementos estão simplesmente localizados exatamente onde são necessários parecem pouca mágica.
Você pode usar
grid-row grid-column para cada elemento para colocá-los exatamente onde queremos, mas quanto mais eu uso o Grid, mais me apaixono pela propriedade
grid-template-areas e colocamos elementos usando as definições de área.
Essa abordagem leva um pouco mais de tempo, mas vale a pena, especialmente quando criamos um design adaptável (chegaremos a isso em breve).
Primeiro, precisamos definir
grid-template-areas para o elemento
.card , após o qual podemos atribuir todos os elementos filhos a essas áreas:
.card { ... display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "image name" "image position" "social description"; } .profile-name { grid-area: name; } .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; }
No exemplo abaixo, você pode ver tudo isso em ação:
É simples assim
Uma das razões pelas quais eu gosto de usar
grid-template-areas é que, se alguém olhar o código, entenderá imediatamente o que está acontecendo ...
Se alguém lhe mostrar o código no qual
grid-row e
grid-column são especificadas usando números e
span , é bastante simples calcular e entender onde e como eles estarão localizados. Para layouts simples ou para usar o span em alguns lugares, considero o uso apropriado,
mas muito mais agradável, apenas olhando apenas o código do elemento pai, entendo imediatamente como será o layout inteiro .
Ao usar uma grade, é mais fácil saber o tamanho real do elemento.
No nosso primeiro exemplo, onde definimos a largura de um dos elementos flexíveis = 50%, na verdade não era igual a 50%. Se você entende por que isso aconteceu, ótimo, mas às vezes ainda pode ser irritante. Isso é fácil de contornar, mas ao usar uma grade, torna-se um problema muito menor.
Como definimos todo o layout, também especificamos exatamente quanto elementos de espaço devem ocupar.
E, é claro, temos à disposição a função
minmax() e as unidades de medida
fr , que agitam um pouco a água, pois permitem definir tamanhos de maneira mais flexível (como as que usamos no exemplo acima), mas mesmo assim ainda temos controle total sobre sua flexibilidade, e tudo isso é controlado pelos pais, sem a necessidade de definir algumas propriedades para os pais e outras para os filhos.
Alterações limitadas
Se olharmos para o exemplo do Flexbox, não podemos fazer com que ele se pareça com o layout abaixo sem alterar a marcação HTML:
Nós nos restringimos a como agrupamos elementos usando um
<div> . Tivemos que usar esses
<div> para fazer o layout funcionar, mas agora ele se tornou um obstáculo para nós.
Com os filhos de nosso contêiner de grade localizados no mesmo nível, você pode fazer tudo . E como um bônus adicional, já que configuramos tudo usando
grid-template-areas , é muito fácil fazer essas alterações.
.card { grid-template-areas: "image name" "image position" "image social" ". description"; }
Jogando com
grid-template-areas dessa maneira, é possível mudar rápida e facilmente os ícones das redes sociais para onde queremos vê-los (o ponto na última parte indica uma célula vazia).
Facilita a vida ao trabalhar com consultas de mídia.
Como mencionei várias vezes, esse é o caso quando o uso
grid-template-areas garantido. Podemos controlar totalmente nosso layout apenas usando as propriedades do pai:
.card { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "name" "image" "social" "position" "description"; } .profile-name { grid-area: name;} .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; } @media (min-width: 600px) { .card { text-align: left; grid-template-columns: 1fr 3fr; grid-template-areas: "image name" "image position" "social description"; } .profile-name::after { margin-left: 0; } }
O CodePen abaixo contém um exemplo completo. Você pode estudá-lo, brincar com áreas de grade e ver como é fácil reconstruir completamente o layout.
O Flexbox ainda tem seu próprio escopo
Uso o Grid cada vez mais, mas acho que o Flexbox ainda tem seu próprio escopo. Se eu tiver um logotipo e uma navegação próximos um do outro, seria bom ter uma maneira fácil de fazer algo assim e saber que eles estarão onde eu quero que eles estejam:
.header { display: flex; justify-content: space-between; }
O mesmo se aplica ao
<ul> que usamos para navegação, apenas para obter os elementos um após o outro ou, como você pode ver no exemplo com o cartão que examinamos, é ideal para
.social-list .
Para componentes simples em que não precisamos de um layout complicado, isso realmente funciona bem. Mas, cada vez mais, noto um movimento em direção ao Grid, às vezes devido à necessidade óbvia deles, às vezes porque quero usar a função
minmax() ou as unidades de medida
fr .
Mas, no final, acho que a melhor coisa sobre o Grid é a capacidade de simplificar bastante nossa marcação.
Ainda somos forçados a usar o
<div> , mas graças ao Grid, podemos usá-los cada vez menos.
Em conclusão
Por melhor que seja o Flexbox, ele não é mais simples que o Grid. Realmente funciona muito bem em determinadas situações, mas ao trabalhar com layouts mais complexos, o Grid nos permite ter muito mais controle. Esse controle é aprimorado ao trabalhar com design responsivo ao fazer alterações nas consultas de mídia.
Ao usar o Flexbox, o máximo que podemos mudar é a
flex-direction da
flex-direction . Usando uma grade, podemos rápida e simplesmente alterar completamente o design de um componente.
Tanto o Flexbox quanto o Grid têm muito mais recursos. Cada um tem seu próprio objetivo, mas se você sente que não sabe qual abordagem seguir ou está tentando entender o design responsivo em geral, anunciei recentemente um curso no Scrimba que aborda questões de design responsivo chamado The Responsive Web Design Bootcamp.