Como combinar grades Flexbox e CSS para layouts eficientes

Nota do editor: esta postagem de convidado foi escrita por Abbey Fitzgerald, uma engenheira de software UX e web designer que adora a arte de criar código.

No passado, as propriedades flutuantes do CSS eram um dos principais métodos para organizar os elementos em um site. E se você já trabalhou dessa forma, sabe que nem sempre é ideal para layouts complexos. Felizmente, na era moderna do web design, o alinhamento de elementos tornou-se muito mais simplificado graças ao Flexbox e CSS Grids.

Quando o Flexbox surgiu, ele tornou o alinhamento muito mais fácil e desde então tem sido amplamente adotado. Os layouts de grade CSS também criaram muita empolgação na comunidade de web design. Um tempo atrás, demos uma olhada em como criar um layout de grade CSS básico. Embora não seja amplamente adotado, os navegadores estão começando a adotar suporte para ele. Quando totalmente suportado, isso terá um grande impacto nos projetos. O suporte do navegador está aumentando o tempo todo; certifique-se de verificar Can I Use para obter as informações mais atualizadas.

Agora você pode estar se perguntando o que vem a seguir; afinal, Flexbox e CSS Grid Layouts parecem alcançar resultados semelhantes. No entanto, não é um debate Flexbox versus Grid, mas sim aprender como usá-los juntos. Quanto mais eu brinquei com o Grid e o Flexbox, descobri que você não precisa escolher apenas um ou outro. Em um futuro próximo, quando os layouts de grade CSS tiverem suporte total ao navegador, os designers poderão aproveitar as vantagens combinadas de cada um e criar os designs mais eficientes e interessantes.

Testando Flexbox Básico e Layouts de Grade CSS

Para determinar se Flexbox ou CSS Grid funciona melhor para o seu fluxo de trabalho de desenvolvimento, criar um layout padrão que use apenas um ou outro é uma boa maneira de ver como eles funcionam e se há vantagens de um sobre o outro. Começaremos com um tipo de layout muito simples e familiar com cabeçalho, barra lateral, conteúdo principal e rodapé. Um layout simples como esse é uma maneira rápida de posicionar os vários elementos.

E lembre-se, você nunca deve fazer alterações em seu site ao vivo. Em vez disso, tente experimentar o Local, um aplicativo gratuito de desenvolvimento local do WordPress. Faça o download hoje!

Como criar um layout com Flexbox

Recentemente, abordei o assunto da criação de um layout de cartão Flexbox. Essa postagem detalha como o Flexbox funciona junto com informações específicas de CSS, portanto, se você for iniciante no Flexbox, isso o ajudará a se familiarizar com o funcionamento.

Para este tutorial, aqui está o que estaremos construindo:

Veja isso no Codepen.

Para este layout básico, as principais tarefas do Flexbox incluem:

• Criar cabeçalho e rodapé de largura total
• Posicione a barra lateral ao lado da área de conteúdo principal
• Dimensionamento correto da barra lateral e da área de conteúdo principal
• Posicionamento dos elementos de navegação

Estrutura HTML básica

 <div class="container">
        
    <cabeçalho>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <button></button>
    </header>
    <div class="wrapper">
        <aside class="barra lateral">
            <h3></h3>
        </aside>
        <section class="principal">
            <h2></h2>
            <p></p>
        </section>
    </div><!-- /wrapper -->
    <rodapé>
        <h3></h3>
        <p></p>
    </rodapé>
</div><! -- /contêiner -->

Como usar a tela flexível

Estilo do cabeçalho

Começando de fora e trabalhando para dentro, adicionando display: flex; para o contêiner é o primeiro passo em qualquer layout Flexbox. A direção flexível é definida como coluna, então isso posicionará todas as seções uma sob a outra.

 .container {
    exibição: flexível;
    flex-direction: coluna;
}

A criação de um cabeçalho de largura total foi bastante automática com a display: flex; (cabeçalhos são um elemento de nível de bloco por padrão). Devido a esta declaração, ela permitirá um fácil posicionamento dos elementos de navegação.

Há um logotipo e dois itens de menu na navegação à esquerda com um botão de login à direita. A navegação está no cabeçalho, portanto, por justify-content: space-between; a navegação e o botão serão espaçados automaticamente.

Uma coisa útil é como é fácil alinhar o texto. Na navegação, com align-items: baseline; , todos os itens de navegação são alinhados à linha de base do texto para que pareçam mais uniformes.

 cabeçalho{
    preenchimento: 15px;
    margem inferior: 40px;
    exibição: flexível;
    justificar-conteúdo: espaço-entre;
}
cabeçalho de navegação {
    exibição: flexível;
    itens de alinhamento: linha de base;
    tipo de estilo de lista: nenhum;
}

Estilo do conteúdo da página

Em seguida, há a barra lateral e as áreas de conteúdo principal com um wrapper que inclui as duas. O div com uma classe .wrapper também precisa do display: flex; mas a direção flexível é diferente da anterior. Como a barra lateral e as áreas de conteúdo estão próximas uma da outra, em vez de empilhadas, a direção flexível é

Em seguida, há a barra lateral e as áreas de conteúdo principal com um wrapper que inclui as duas. O div com uma classe .wrapper também precisa do display: flex; mas a direção flexível é diferente da anterior. Como a barra lateral e as áreas de conteúdo estão próximas uma da outra em vez de empilhadas, a direção flexível é linha, que é o oposto do que foi feito no contêiner acima.

 .embrulho {
    exibição: flexível;
    flex-direction: linha;
} 

O tamanho da seção principal e da barra lateral é muito importante, pois as informações mais importantes residem aqui. O conteúdo principal deve ter três vezes o tamanho da barra lateral, o que é muito fácil de fazer com o Flexbox.

 .principal {
    flexível: 3;
    margem direita: 60px;
}
.Barra Lateral {
   flexível: 1;
}

Para este trecho de código, usei abreviação. Os valores flex são para a propriedade flex-grow. O crescimento flexível é poderoso porque é quanto o(s) item(ns) crescerá(ão) em relação ao restante dos itens flexíveis dentro do mesmo contêiner.

No geral, o Flexbox foi bastante eficiente na criação desse layout simples. Foi especialmente útil ter controle sobre o estilo dos itens da lista e o espaçamento entre a navegação e o botão.

Como criar um layout com layouts de grade CSS

Para testar a eficiência, o próximo passo é construir o mesmo layout básico com CSS Grid. Os elementos da página são todos iguais e serão posicionados da mesma forma que no exemplo do Flexbox.

Veja isso no Codepen.

Áreas de modelo de grade

Uma coisa útil com o CSS Grid é a capacidade de especificar áreas de modelo, o que pode tornar a definição de layouts muito intuitiva. Ao adotar essa abordagem, as áreas na grade podem ser nomeadas e referenciadas para itens de posição. Para este layout básico, há quatro itens que precisaremos nomear:

• cabeçalho
• conteúdo principal
• Barra Lateral
• rodapé

Estrutura HTML Básica

 <div class="container">
        
    <cabeçalho>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <button></button>
    </header>
  
    <aside class="barra lateral">
        <h3></h3>
        <ul>
            <li></li>
        	<li></li>
	<li></li>
	<li></li>
	<li></li>
          </ul>
    </aside>
    <section class="principal">
        <h2></h2>
        <p></p>
         <p> </p>
  </section>
    <rodapé>
        <h3></h3>
        <p></p>
    </rodapé>
</div>

Vamos definir essas áreas em nosso contêiner de grade em ordem, como se estivéssemos desenhando-as. Também vou espaçá-los para facilitar a leitura.

 grid-template-reas:
        "cabeçalho cabeçalho"
        "barra lateral principal"
        "rodapé rodapé";

Observe como a barra lateral foi listada antes da principal? Trocá-los também faria a ordem mudar na página. Atualmente, a barra lateral está à esquerda e o conteúdo principal à direita, mas você pode alterá-la facilmente, se necessário.

Uma coisa a observar: esses nomes precisam estar “conectados” ao estilo. Só porque grid-template-areas foram declaradas, não sabemos onde o cabeçalho realmente pertence. No bloco de cabeçalho, grid-area: header; precisa ser adicionado.

 cabeçalho{
    grid-area: cabeçalho;
    preenchimento: 20px 0;
    exibição: grade;
    grade-modelo-colunas: 1fr 1fr;
}

A estrutura do HTML é a mesma do exemplo do Flexbox, mas o CSS é bem diferente para criar o layout da grade.

 .recipiente{
    largura máxima: 900px;
    cor de fundo: #fff;
    margem: 0 automático;
    preenchimento: 0 60px;
    exibição: grade;
    grade-modelo-colunas: 1fr 3fr;
    grid-template-reas:
        "cabeçalho cabeçalho"
        "barra lateral principal"
        "rodapé rodapé";
    lacuna na grade: 50px;
}

Para começar a trabalhar com um layout de grade CSS, é muito importante ter display: grid; definido no recipiente. As colunas de modelo de grade são declaradas aqui para fornecer a estrutura geral da página. Lembre-se de como o exemplo do Flexbox tinha a classe .main configurada para um flex-grow de 3 e a barra lateral tinha um flex-grow de 1 para estabelecer o dimensionamento? Aqui as colunas de modelo de grade foram definidas como 1fr e 3fr. É aqui que a grade está tomando forma com as unidades fracionárias. Com esses valores, é aparente que há duas colunas e elas não têm a mesma largura. A coluna definida para 3fr é três vezes mais larga que a outra. Isso explica como a barra lateral parece mais estreita do que a área de conteúdo.

Em seguida, as unidades fr usadas para o contêiner precisam ser ajustadas para o cabeçalho. As colunas de modelo de grade foram ajustadas para 1fr e 1fr. Dessa forma, haverá duas colunas de tamanho igual e os itens de navegação e o botão caberão.

 cabeçalho{
    grid-area: cabeçalho;
    exibição: grade;
    grade-modelo-colunas: 1fr 1fr;
} 

Para colocar o botão, só precisamos usar justificar-auto e configurá-lo para terminar.

 botão de cabeçalho {
    justifique-se: fim;
}

A navegação é colocada onde precisa estar:

 cabeçalho de navegação {
    justifique-se: comece;
}

O rodapé de largura total não precisa de colunas diferentes definidas, pois o conteúdo está no meio.

Como criar um layout com grades Flexbox e CSS

Agora que vimos o que cada método pode fazer individualmente, é hora de criar algo mais complexo combinando Flexbox e CSS Grid Layouts.

Veja isso no Codepen.

Aqui está o esboço básico para fazer a grade funcionar:

Veja isso no Codepen.

Observe como o design depende de colunas e linhas? Esse layout precisa que as coisas se alinhem e se comportem de maneira consistente em ambas as direções, portanto, o uso do CSS Grid é eficiente para o layout geral.

O planejamento é fundamental com um layout como este. É uma boa ideia esboçar primeiro e ver como as coisas se encaixam, literalmente. Para iniciar o código, tendo display: grid; é essencial; sem ele, o uso desse tipo de layout não funcionará. Uma coisa a observar aqui é que há espaçamento entre os blocos de conteúdo. Isso foi alcançado com grade-coluna-gap e grade-linha-gap.

 .container {
  exibição: grade;
  grade-modelo-colunas: 0.4fr 0.3fr 0.3fr;
  grade-coluna-gap: 10px;
  intervalo entre linhas da grade: 15px;
}

As unidades fracionárias estão de volta para este layout e agora são necessárias três áreas. O primeiro valor de 0,4 fr é ligeiramente mais largo que o segundo e o terceiro, que são ambos de 0,3 fr.

Layout de coluna e linha

É aqui que é importante fazer referência ao diagrama desde o início. Começando pelo topo, é assim que o cabeçalho é colocado. Abrange todas as colunas e uma linha.

 .cabeçalho {
  grid-column-start: 1;
  final da coluna da grade: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  cor de fundo: #d5c9e2;
}

Se você quiser usar abreviação, os valores inicial e final estão na mesma linha e separados por uma barra. Ficaria assim:

 .cabeçalho {
  grade-coluna: 1/4;
  grade-linha: 1 / 2;
  cor de fundo: #55d4eb;
}

Para colocar todos os outros itens, os valores apropriados de grade e coluna precisam apenas ser adicionados ao CSS. Em vez de passar por eles aqui um por um, este exemplo está no Codepen.

Após a construção do Grid Layout, o próximo passo é ajustar o conteúdo.

Navegação

Flexbox é perfeito para colocar os elementos de cabeçalho. O exemplo de layout básico abordou isso com o conteúdo justificado: espaço entre. O exemplo de grade precisava justificar-se: iniciar; na navegação e justificar-se: fim; para o botão de colocar as coisas, mas o Flexbox facilitou o espaçamento para a navegação.

 .cabeçalho {
  grade-coluna: 1/4;
  grade-linha: 1 / 2;
  cor: #9f9c9c;
  transformação de texto: maiúsculas;
  borda inferior: 2px sólido #b0e0ea;
  preenchimento: 20px 0;
  exibição: flexível;
  justificar-conteúdo: espaço-entre;
  itens de alinhamento: centro;
} 

Este mesmo formato será seguido aqui. O logotipo, os itens de menu e o botão utilizaram o conteúdo justificado do Flexbox para espaçamento.

Grade de conteúdo da coluna

Para ocasiões que exigem que os elementos se alinhem em uma direção, o que significa que é mais “unidimensional”, normalmente o Flexbox é a melhor opção. Além disso, o Flexbox é bom em dimensionar elementos dinamicamente. Talvez você tenha tentado isso em uma linha de caixas adicionando display:flex; em um elemento pai e propriedades flexíveis nos elementos filho. Com essa técnica, forma-se uma bela linha e é uma forma eficiente de garantir que todos os elementos tenham a mesma altura.

Conteúdo da linha com texto e botões

Na seção “conteúdo extra”, foram adicionadas três áreas com texto e botões. O Flexbox facilita manter a largura definida para três colunas.

 .extra {
  grade-coluna: 2/4;
  grade-linha: 4/5;
  preenchimento: 1rem;
  exibição: flexível;
  flex-wrap: envoltório;
  borda: 1px sólido #ececec;
  justificar-conteúdo: espaço-entre;
}

Uma exceção do Flexbox

Sim, eu disse que o Flexbox é melhor para layouts unidimensionais, grades ou colunas, mas se você ler a postagem Como usar o Flexbox para criar um layout de design de cartão CSS moderno, houve um hack do Flexbox de “última linha” que foi demonstrado para manter linhas e colunas equilibradas, mesmo sem um número par de cartas.

 .imagens relacionadas {
  grade-coluna: 1/3;
  grade-linha: 5/6;
  exibição: grade;
  grid-template-columns: repeat(4,1fr);
  lacuna na grade: 1rem;
}
.imagens relacionadas .icon {
    cor de fundo: branco;
    flex: 1 1 150px;
}

Resumo da Abordagem do Projeto

Basicamente, a abordagem que usei aqui foi utilizar CSS Grid Layout para o layout geral (e qualquer coisa que não fosse linear no design). Nas áreas de conteúdo da grade, o Flexbox foi usado para ordenar e ajustar o estilo nas áreas da grade.

Recursos

Existem tantos recursos excelentes para Flexbox e layouts de grade CSS, muitos para mencionar. Aqui estão alguns que o ajudarão a começar na direção certa e inspirar seus layouts.

• Folha de dicas de alinhamento de caixas
• Laboratório de layouts de Jen Simmons
• Um guia completo para grade
• Um Guia Completo para Flexbox

Felizmente, esses exercícios deram a você uma ideia melhor de como criar layouts com CSS Grid Layouts e Flexbox. O que você acha dessas novas tecnologias? Como eles ajudaram seu processo de desenvolvimento?