Web design responsivo usando CSS Grid e Flexbox

Web design responsivo é uma forma de desenvolver sites para que funcionem bem em vários tipos de dispositivos e tamanhos de tela. Em vez de ter que criar múltiplas versões de um site para diferentes dispositivos, o design responsivo utiliza grades e layouts flexíveis, consultas de mídia e imagens fluidas para melhorar a experiência do usuário, em todas as plataformas.

Por que o Web design responsivo é importante?

À medida que mais e mais pessoas ao redor do mundo usam celulares e tablets para navegar na internet, ter um site responsivo não é mais uma opção – é uma necessidade. Um design responsivo permite maior usabilidade, permitindo que os consumidores acessem o conteúdo de forma integrada, independentemente do dispositivo que estejam usando. Também melhora a experiência do usuário, garantindo que o conteúdo seja visualmente coerente e facilmente legível em todos os dispositivos. Isso pode reduzir a frustração e incentivar a interação. Além do mais, o design responsivo prepara sites à prova de futuro, permitindo que eles se adaptem a novos dispositivos sem precisar fazer grandes reformulações.

Hoje, veremos os fundamentos do web design responsivo e nos concentraremos particularmente em duas técnicas CSS poderosas: Flexbox e CSS Grid. Mostraremos como esses layouts se adaptam a diferentes tamanhos de tela usando um site simples com caixas coloridas e números.

Uma breve história do web design responsivo

O web design responsivo mudou muito desde os primeiros dias da Internet. Consultas de mídia, que aplicam estilos com base nas características do dispositivo, como tamanho da tela, resolução e orientação. foram introduzidos no início dos anos 2000, o Flexbox foi lançado em 2012 e o CSS Grid foi adotado em 2017. Essas inovações permitiram que os designers criassem layouts adaptáveis ​​em vários dispositivos diferentes, proporcionando uma melhor experiência aos usuários.

Criando Layouts Responsivos com CSS Grid e Flexbox

Agora, vamos conferir alguns exemplos práticos que nos permitem ver como funcionam o Flexbox e o CSS Grid.

Layout de grade responsivo: grade de cores

Criaremos um layout simples usando CSS Grid.

HTML para layout de grade:

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
    

HTML:

• A marcação HTML cria um contêiner responsivo (grid-container) e caixas coloridas (grid-item) com diferentes números e cores de fundo. A meta tag da janela de visualização permite que o layout seja dimensionado em diferentes dispositivos.

CSS para layout de grade:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f0f0f0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 20px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:

• O CSS para o layout da grade usa diferentes propriedades da grade para ser mais responsivo. A exibição: grade; A declaração define o elemento com a classe grid-container como um contêiner de grade, para que possamos aproveitar tudo o que as grades têm a oferecer. As colunas do modelo de grade: repeat(auto-fit, minmax(100px, 1fr)); propriedade define como as colunas da grade são estruturadas: ajusta automaticamente o número de colunas com base no espaço disponível, sendo que cada coluna tem largura mínima de 100 pixels e máxima de 1 fração (1fr) do espaço disponível. Este design permite que a grade se adapte a diferentes tamanhos de tela, para que os itens da grade não transbordem ou criem lacunas desagradáveis. A lacuna: 10px; propriedade aplica espaçamento consistente aos itens da grade. Por último, empilhamos os elementos grid-item com display: flex; e centralize seu conteúdo com justifique-conteúdo: centro; e alinhar itens: centro. Dessa forma, cada item fica bem organizado e equilibrado.

Exemplo de Web Design Responsivo: Layout de Grade

Este layout de grade usa:

1. Contagem dinâmica de colunas: a grade ajusta automaticamente o número de colunas para caber na largura da janela de visualização, com itens ocupando no mínimo 100px.
2. Dimensionamento flexível: o ajuste automático permite que as caixas refluam e sejam reorganizadas quando necessário, dando a tudo uma aparência mais organizada.
3. Consultas de mídia: Embora não tenha sido escrito aqui, a forma como os elementos da grade se comportam com diferentes tamanhos de tela demonstra o conceito de consultas de mídia usando propriedades de grade responsivas.

Layout Flexbox responsivo: linha de cores

A seguir, vamos usar o Flexbox para criar uma linha simples de caixas coloridas.

HTML para layout Flexbox:

    
    
    
    


    

        
1
        
2
        
3
        
4
    

HTML:

• Semelhante ao exemplo da grade, o HTML aqui cria um contêiner flexível com caixas de itens flexíveis que exibem números coloridos.

CSS para layout Flexbox:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

.flex-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:
O CSS aqui usa propriedades do Flexbox para criar um layout responsivo que se adapta a vários tamanhos de tela. A tela: flexível; no .flex-container fornece aos seus elementos filhos, ou (itens flexíveis), funcionalidades do Flexbox. O envoltório flexível: envoltório; propriedade permite que os itens fluam em várias linhas se a largura do contêiner for excedida. O conteúdo justificado: centro; A propriedade centraliza os itens flexíveis ao longo do eixo principal, para que haja um layout equilibrado, independentemente do número de itens. A lacuna: 10px; propriedade introduz espaçamento uniforme entre os itens, melhorando a organização geral. Cada .flex-item também é um flex container, usando display: flex; para permitir maior alinhamento de seu conteúdo interno, que é centralizado tanto vertical quanto horizontalmente usando justify-content: center; e alinhar itens: centro;. As dimensões fixas de altura: 100px; e largura: 100px; proporcionam uniformidade, enquanto a combinação dessas propriedades confere ao layout uma aparência agradável ao mesmo tempo que se adapta às necessidades dos diferentes dispositivos.

Exemplo de Web Design Responsivo: Layout Flexbox

Este layout flexbox demonstra diversas características de design responsivo.

1. Flex Wrapping: O flex-wrap: wrap; propriedade faz com que as caixas passem para a próxima linha quando não cabem na linha, adaptando-se a diferentes larguras de janela de visualização.
2. Itens centralizados: os itens permanecem centralizados independentemente do tamanho da tela, melhorando a apresentação geral.
3. Dimensões Fixas: As caixas possuem um tamanho específico, mas são encapsuladas e reajustadas de acordo com o espaço disponível, permitindo um layout responsivo.

Comparando CSS Grid e Flexbox

Quando se trata de design de layout em CSS, Grid e Flexbox são ótimas opções, mas servem a propósitos diferentes. CSS Grid é um sistema de layout bidimensional que permite criar estruturas de grade complexas com linhas e colunas, tornando-o ideal para layouts onde é necessário controle preciso sobre ambas as dimensões, como em aplicativos web ou painéis. Por outro lado, o Flexbox é um modelo de layout unidimensional que é melhor para distribuir espaço ao longo de um único eixo – horizontal ou verticalmente – tornando-o perfeito para layouts mais simples ou componentes menores, como botões ou menus de navegação. Embora você possa escolher o Grid para um layout abrangente e estruturado, onde os elementos precisam se alinhar em ambos os eixos, o Flexbox seria a sua escolha para um layout adaptável e fluido que precisa responder ao tamanho do conteúdo. No final, a sua escolha deve depender das necessidades específicas do seu projeto; muitas vezes, usar os dois juntos, de forma complementar, pode fornecer os melhores resultados.

Conclusão

Com CSS Grid e Flexbox, você pode criar layouts adaptáveis ​​que ficam ótimos em qualquer dispositivo. Esses exemplos ilustram como pode ser simples implementar designs dinâmicos.

Agora é sua vez! Experimente essas técnicas, modifique as cores e as configurações de layout e veja como é simples criar designs divertidos e responsivos.
``
fontes:
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
https://kinsta.com/blog/responsive-web-design/#4-flexbox-layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://blog.logrocket.com/css-flexbox-vs-css-grid/#:~:text=Para um estilo de layout principal, útil ao trabalhar com linhas.