Os layouts macro descrevem a organização maior, em toda a página, da sua interface.
Antes de aplicar qualquer layout, verifique se o fluxo do conteúdo faz sentido. Essa ordem padrão de coluna única é aquela que as telas menores recebem.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Quando você organiza esses componentes individuais no nível da página, você está projetando um layout de macro: uma visualização de alto nível de sua página. Usando consultas de mídia, você pode 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 à sua página. No exemplo acima, digamos que você queira um layout de duas colunas quando houver largura de tela suficiente disponível. Para aplicar esse layout de duas colunas quando a largura do navegador for suficiente, use uma consulta de mídia para definir os estilos de grade acima de um ponto de interrupção 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 ficariam assim:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
No entanto, a versão 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 que contém.
Você precisa de uma consulta de mídia?
Nem sempre é necessário usar uma consulta de mídia. As consultas de mídia funcionam bem quando você aplica mudanças a alguns elementos, mas se o layout precisar ser atualizado muitas vezes, as consultas de mídia podem ficar fora de controle com muitos pontos de interrupção.
Digamos que você tenha uma página cheia de componentes de card.
Os cards nunca são maiores do que 15em, e você quer colocar quantos cards em uma linha couberem.
Você pode programar consultas de mídia com pontos de interrupção de 30em, 45em, 60em.
e assim por diante, mas isso é muito tedioso e difícil de manter.
Em vez disso, é possível aplicar regras para que os próprios cards ocupem automaticamente a quantidade certa de espaço.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
Você pode criar um layout semelhante com o flexbox. Nesse caso, se não houver cartas suficientes para preencher a última linha, as cartas restantes serão esticadas para preencher o espaço disponível em vez de se alinharem 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 projetar layouts de macro dinâmicos com CSS mínimo e sem consultas de mídia. Isso é menos trabalhoso para você, porque o navegador faz os cálculos. Para conferir alguns exemplos de layouts CSS modernos que são fluidos sem exigir consultas de mídia, consulte 1linelayouts.com.
Teste seu conhecimento
Teste seus conhecimentos sobre layouts macro.
Qual frase melhor descreve os layouts macro?
Os layouts macro sempre usam consultas de mídia para se adaptar a diferentes tamanhos de tela?
Agora que você tem algumas ideias para layouts macro no nível da página, volte sua atenção para os componentes na página. Esse é o reino dos microlayouts.