Os layouts de macro descrevem a organização maior e de toda a página da interface.
Antes de aplicar qualquer layout, você precisa se certificar de que o fluxo do seu conteúdo faça 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 à 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 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 flexbox requer mais CSS. Cada coluna tem uma regra separada para descrever quanto espaço ela deve ocupar. No exemplo da grade, as mesmas informações são encapsuladas em uma regra para o elemento contêiner.
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 ao aplicar alterações a alguns elementos, mas se o layout precisar ser muito atualizado, suas consultas de mídia poderão sair do controle com muitos pontos de interrupção.
Digamos que você tem uma página cheia de componentes de cards.
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;
}
É possível conseguir um layout semelhante com o flexbox. Nesse caso, se não houver cards suficientes para preencher a última linha, os cards restantes serão esticados para preencher o espaço disponível, em vez de se alinharem em colunas. Se você quiser alinhar linhas e colunas, use 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 em flexbox ou grid, é possível criar layouts de macro dinâmicas com CSS mínimo e sem consultas de mídia. Isso é menos trabalhoso para você, porque o navegador faz os cálculos. Para ver alguns exemplos de layouts CSS modernos que são fluidos sem exigir consultas de mídia, consulte 1linelayouts.com (link em inglês).
Teste seu conhecimento
Teste seus conhecimentos sobre layouts de macro.
Qual frase descreve melhor os layouts macro?
Os layouts de macro sempre usam consultas de mídia para se adaptar a diferentes tamanhos de tela?
Agora que você tem algumas ideias para layouts de macro no nível da página, volte sua atenção para os componentes da página. Esse é o âmbito de micro layouts.