Layouts de macro

Os layouts de macro descrevem a organização maior em toda a página da sua interface.

Um wireframe com layout de duas colunas, ao lado do mesmo layout de uma coluna para uma visualização estreita.

Antes de aplicar qualquer layout, verifique se o fluxo do conteúdo faz sentido. As telas menores terão essa ordem padrão de coluna única.

<body>
  <header>…</header>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <footer>…</footer>
</body>

Ao organizar esses componentes individuais no nível da página, você cria um layout de macro: uma visualização de alto nível da página. Com as consultas de mídia, é possível fornecer regras em CSS descrevendo como essa visualização se ajusta 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;
  }
}

Observação : embora faça mais sentido especificar min-inline-size em vez de min-width, as propriedades lógicas ainda não funcionam em consultas de mídia.

Flexbox

Para este 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 da grade, essas mesmas informações são encapsuladas em uma regra para o elemento contêiner.

Você precisa de uma consulta de mídia?

Nem sempre você precisa usar uma consulta de mídia. As consultas de mídia funcionam bem quando você aplica mudanças em alguns elementos. No entanto, se for necessário muitas atualizações no layout, suas 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 cards. Os cards nunca são maiores do que 15em, e você quer colocar quantos cards couberem em uma linha. É possível criar consultas de mídia com pontos de interrupção de 30em, 45em, 60em e assim por diante, mas isso é bastante tedioso e difícil de manter.

Em vez disso, você pode 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 vão ser esticados 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 criar layouts de macro dinâmicos com o mínimo de CSS e sem consultas de mídia. Isso é menos trabalho para você, você está fazendo o navegador fazer os cálculos. Para ver alguns exemplos de layouts CSS modernos que são fluidos sem a necessidade de consultas de mídia, consulte 1linelayouts.com.

Teste seu conhecimento

Teste seus conhecimentos sobre layouts de macro.

Qual frase descreve melhor os layouts macro?

Layouts que contêm outros layouts.

Tente de novo. A maioria dos layouts contém outros layouts.

Quando um design usa flexbox ou grade.

Tente de novo. Nem o flexbox nem a grade têm nada específico para layouts de macro.

Layouts de baixo nível que cobrem pequenas partes da tela.

Tente de novo.

Layouts de alto nível que cobrem grandes quantidades da tela.

🎉 Layouts macro são layouts básicos para uma página, abrangendo grandes quantidades de área visual e geralmente são ajustados com consultas de mídia de tamanho de página.

Os layouts de macro sempre usam consultas de mídia para se adaptar a diferentes tamanhos de tela?

Verdadeiro

Tente de novo. Um layout de macro não é definido pelo uso de consultas de mídia.

Falso

🎉 Os layouts macro podem se adaptar para ajustar o conteúdo, preencher o espaço disponível e muito mais, sem uma consulta de mídia.

Agora que você tem algumas ideias para layouts de macro no nível da página, Preste atenção aos componentes dentro da página. Esse é o domínio dos microlayouts.