Os layouts macro descrevem a organização maior e abrangente da interface.
Antes de aplicar qualquer layout, verifique se o fluxo do conteúdo faz sentido. Essa ordem padrão de coluna única é o que as telas menores vão receber.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Ao organizar esses componentes individuais no nível da página, você está criando um layout macro: uma visão geral da página. Usando consultas de mídia, é possível fornecer regras em CSS que descrevem como essa visualização deve se ajustar a diferentes tamanhos de tela.
Grade
A grade CSS é uma excelente ferramenta para aplicar um layout à página. No exemplo anterior, digamos que você queira um layout de duas colunas quando houver largura de tela suficiente. Para aplicar esse layout de duas colunas quando o navegador estiver largo o suficiente, use uma consulta de mídia para definir os estilos de grade acima de um breakpoint especificado.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
Para esse layout específico, você também pode usar o flexbox. Os estilos seriam assim:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
No entanto, a versão do flexbox requer mais CSS. Cada coluna tem uma regra separada para descrever quanto espaço ela deve ocupar. No exemplo de grade, essas mesmas informações são encapsuladas em uma regra para o elemento contido.
Você precisa de uma consulta de mídia?
Talvez nem sempre seja necessário usar uma consulta de mídia. As consultas de mídia funcionam bem quando você está aplicando mudanças a alguns elementos, mas, se o layout precisar ser atualizado com frequência, as consultas de mídia poderão ficar fora de controle com muitos breakpoints.
Digamos que você tenha uma página cheia de componentes de card.
Os cards nunca são mais largos que 15em, e você quer colocar o máximo de cards possível em uma linha.
Você pode escrever consultas de mídia com breakpoints como 30em, 45em e 60em, mas isso é bastante tedioso e difícil de manter.
Em vez disso, você pode aplicar regras para que os cards ocupem automaticamente a quantidade certa de espaço.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
É possível criar um layout semelhante com o flexbox. Nesse caso, se não houver cards suficientes para preencher a linha final, os cards restantes serão esticados para preencher o espaço disponível em vez de serem alinhados em colunas. Se você quiser alinhar linhas e colunas, use a grade.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
Ao aplicar algumas regras inteligentes no flexbox ou na grade, é possível criar layouts macro dinâmicos com CSS mínimo e sem consultas de mídia. Isso significa menos trabalho para você, já que o navegador faz os cálculos. Para conferir alguns exemplos de layouts CSS modernos que são fluidos sem exigir consultas de mídia, acesse 1linelayouts.com (link em inglês).
Teste seu conhecimento
Teste seu conhecimento sobre layouts macro.
Qual frase descreve melhor os layouts macro?
Os layouts macro sempre usam consultas de mídia para se adaptar a diferentes tamanhos de tela?
Agora que você já tem algumas ideias para layouts macro no nível da página, concentre-se nos componentes dentro da página. Esse é o domínio dos layouts micro.