O segredo para layouts que se destacam em todas as telas

Nos meus estudos e práticas, com o tempo fui tomando conhecimento sobre algumas técnicas que facilitam tanto a estruturação quanto a estilização do código de maneira geral. Mas aqui vou me prender ao CSS, como você pôde supor pelo título acima. Ou seja, não vou falar sobre algo como programação modular, ou estruturação semântica do HTML (por mais que o primeiro exemplo ajude o bastante quando o projeto em si vai tomando um tamanho considerável) ou alguma outra coisa.

Aqui tratarei de duas das melhores técnicas que existem para te ajudar a criar um layout responsivo, então fique comigo e continue a leitura até o final.

Antes de tudo, como se tratam de formas de tornar o seu layout responsivo, tenha em mente que é muito importante que você construa o seu código CSS primeiro para celulares. Isto é, o o seu código deve ser voltado para smartphones. Somente após isso, através de media queries, você irá adaptar algumas estruturas e classes para tablets, laptops e desktops.

Vamos começar!

No primeiro site em que tive orgulho de dizer que construi, eu usava basicamente margin e padding para posicionar os elementos, então era um problema quando eu precisei que o site se tornasse responsivo, pois além de “marretar” o elemento, eu usava pixels ao invés de rem. Então aqui fica a primeira dica: usem rem sempre que possível.

Por falar em dica, eu pensei em deixar essa para o final, mas é melhor já deixar ela aqui bem perto da primeira. Então aqui vai a segunda dica: caso você queira ou precise “marretar” algum elemento na página, utilize a propriedade position:absolute(ou relative) e depois inclua (em porcentagem ou não) os atributos top/bottom e left/right:

Excelente para alinhamento e distribuição de itens em uma única direção, ou seja, em layouts unidimensionais. Tem um eixo principal e um eixo transversal, e isso dá a oportunidade de controlar o posicionamento e dimensionamento dos itens dentro da caixa. É perfeito para usar em menus de navegação, barras laterais e listas de itens.

Abaixo um singelo exemplo de como funciona uma flex box:

Um bom uso do Flex Box é quando você utiliza sua flexibilidade condicional, isto é, altera o comportamento dos itens de acordo com o layout da tela, perfeito para usar em medias queries.

Existem algumas propriedades interessante para se aplicar em um Flex Box:

flex-grow: Define como os itens flexíveis crescem em relação uns aos outros para preencher o espaço disponível.

flex-shrink: Determina a capacidade dos itens flexíveis de encolher quando há pouco espaço disponível.

flex-basis: Especifica o tamanho base dos itens flexíveis antes de considerar a distribuição de espaço extra ou redução.

Ideal para layouts bidimensionais mais complexos, oferecendo recursos robustos para alinhamento e distribuição de itens em ambas as direções. Ele define uma grade de linhas e colunas, permitindo posicionar elemtos em caixas específicas. Extremamente útil para a construção do layout inteiro de um site, também sendo possível aplicar outro Grid Box dentro de uma caixa existente dentro do site.

Abaixo um singelo exemplo de como funciona um grid box:

*Obsevações: Eu usei algumas cores diferentes nas demais divs somente para gerar um tipo de contraste, assim facilitando o entendimento de como funciona o grid template, tanto em colunas quanto em linhas.*

Lembra que eu falei que é possível aplicar outro grid box dentro de uma caixa existente? Isso é chamado de Subgrid e é especialmente útil quando você deseja manter consistência na estrutura de grade em diferentes níveis de aninhamento.

O subgrid herda a grade do contêiner pai, alinhando suas células à grade do contêiner pai, simplificando o código, já que evita a necessidade de repetir a mesma estrutura.

Para utilizar o subgrid dentro de uma Grid Box basta:

Definir o valor “subgrid” para a propriedade “grid-template-rows” e/ou “grid-template-columns” no elemento filho.

Usar as propriedades de alinhamento, como “justify-items” e “align-items”, para ajustar a posição dos itens dentro do subgrid.

Chegando ao fim do artigo, você pode ter se feito uma pergunta: “Posso usar os dois?”

A resposta é sim, e isso na verdade é altamente recomendado. Você pode, por exemplo usar o Grid Box para o layout geral da página, como dividir em seções principais, e então usar o Flex Box dentro dessas seções para organizar conteúdo unidimensionalmente.

Inclusive, recentemente eu desenvolvi um site utilizando um pouco destes dois conceitos apresentados. Só clicar aqui e você o verá em ação (se trata de uma home page para adicionar os atalhos dos seus sites favoritos

Se quiser o código, você pode acessar o meu GitHub. 

Obrigado a quem acompanhou até aqui, e se alguém tiver alguma dica ou informação relevante sobre o tema abordado, sinta-se livre para opiniar nos comentários.

Criado, revisado, refinado e editado por:

Ferramentas:

https://ray.so/ - Para as imagens de códigos

https://nekocalc.com/px-to-rem-converter - Para a conversão de pixel para rem

https://ezgif.com/ - Para criação de gifs

https://uiverse.io/ - Para o laboratório das imagens de exemplo