Criar layouts responsivos é um desafio comum para desenvolvedores web. Neste blog, exploraremos como obter um design responsivo específico usando diferentes técnicas CSS, focando em por que CSS Grid é a melhor abordagem para este layout específico.

O desafio

Precisamos criar um layout onde:

Visualização da área de trabalho:

• DIV 1 e DIV 3 são empilhados verticalmente à esquerda, cada um ocupando 50% da coluna esquerda.
• DIV 2 ocupa toda a altura da coluna da direita.

Visualização móvel:

• Todas as três divs são empilhadas verticalmente.

Por que o Flexbox fica aquém

Flexbox é excelente para layouts unidimensionais, mas tem dificuldade com layouts bidimensionais complexos como o nosso. Eis o porquê:

 

   
DIV 1
   
DIV 2
   
DIV 3
 

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1),
.item:nth-child(3) {
    flex: 1 1 calc(50% - 10px);
}

.item:nth-child(2) {
    flex: 1 1 50%;
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 100%;
    }
}

Problemas com o Flexbox

Nesta configuração do flexbox:

• DIV 2 não pode ajustar automaticamente sua altura para corresponder à altura combinada de DIV 1 e DIV 3.
• O Flexbox é principalmente para layouts unidimensionais (linha ou coluna), não para arranjos bidimensionais complexos.

A solução de grade CSS

CSS Grid é excelente na criação de layouts bidimensionais, tornando-o perfeito para esse desafio.

 

   
DIV 1
   
DIV 2
   
DIV 3
 

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
    }
    .item {
        width: 100%;
    }
}

Explicação

Layout da grade:

• Define uma grade com duas colunas e duas linhas.
• Posiciona o DIV 1 na primeira coluna e na primeira linha.
• Posiciona o DIV 2 na segunda coluna, abrangendo duas linhas.
• Posiciona o DIV 3 na primeira coluna e na segunda linha.

Design Responsivo:

• Para telas de 768px ou mais estreitas, o layout muda para flexível, empilhando itens verticalmente.

Conclusão

Embora o Flexbox seja ótimo para layouts mais simples e unidimensionais, o CSS Grid fornece o poder e a flexibilidade necessários para designs bidimensionais mais complexos. Usando CSS Grid, podemos facilmente alcançar o layout responsivo desejado com código mínimo e controle máximo.

Sinta-se à vontade para adaptar este exemplo para se adequar aos seus próprios projetos e aproveite os benefícios de usar CSS Grid para seus layouts responsivos!