Quando pensamos em layouts, muitas vezes pensamos em designs no nível da página. No entanto, componentes menores na página podem ter seus próprios layouts independentes.
O ideal é que esses layouts no nível do componente se ajustem automaticamente, independente da posição deles na página. Pode haver situações em que você não sabe se um componente será colocado na coluna de conteúdo principal, na barra lateral ou em ambas. Sem saber ao certo aonde um componente vai acabar, é necessário garantir que ele possa se ajustar ao contêiner.
Grade
A grade CSS não serve apenas para layouts no nível da página. Isso também funciona bem para os componentes que fazem parte deles.
Neste exemplo, os pseudoelementos ::before e ::after criam linhas decorativas nos dois lados de um cabeçalho. O próprio cabeçalho é um contêiner de grade. Os elementos
individuais são organizados de modo que as linhas sempre preencham o espaço disponível.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
Saiba como inspecionar layouts de grade no Chrome DevTools.
Flexbox
Como o nome sugere, é possível usar flexbox para tornar seus componentes flexíveis. É possível declarar quais elementos do componente precisam ter um tamanho mínimo ou máximo e deixar os outros elementos flexíveis para se ajustarem adequadamente.
Neste exemplo, a imagem ocupa um quarto do espaço disponível e o texto ocupa os outros três quartos. No entanto, a imagem nunca fica maior do que 200 pixels.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
Saiba como inspecionar layouts flexbox no Chrome DevTools.
Consultas em contêiner
O Flexbox permite que você projete com base no conteúdo. É possível especificar os parâmetros dos elementos (o quão estreitos e largos eles vão ficar) e permitir que o navegador descubra a implementação final.
Mas o componente em si não tem consciência do contexto. Ela não sabe se está sendo usada no conteúdo principal ou em uma barra lateral. Isso pode tornar os layouts de componentes mais complicados do que os layouts de página. Para aplicar estilos contextualmente relevantes, os componentes precisam saber mais do que o tamanho da janela de visualização em que se encontram.
Com os layouts de página, você sabe a largura do contêiner, porque ele é a janela de visualização do navegador. As consultas de mídia informam as dimensões do contêiner no nível da página.
Para informar as dimensões de qualquer contêiner, use as consultas de contêiner.
Para começar, defina quais elementos funcionam como contêineres.
main,
aside {
container-type: inline-size;
}
Isso significa que você quer consultar a dimensão inline. Para documentos em inglês, esse é o eixo horizontal. Você alterará os estilos com base na largura do contêiner.
Se um componente estiver dentro de um desses contêineres, você poderá aplicar estilos de maneira semelhante à forma como aplica consultas de mídia.
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
Se um objeto de mídia estiver dentro de um contêiner mais estreito que 25em, os estilos flexbox
não vão ser aplicados. A imagem e o texto exibidos estão ordenados verticalmente.
No entanto, se o elemento que o contém for mais largo que 25em, a imagem e o texto aparecerão
lado a lado.
Com as consultas de contêiner, é possível definir o estilo dos componentes de forma independente. É possível escrever regras com base na largura do elemento que o contém. A largura da janela de visualização não importa mais.
Combinar consultas
Você pode usar consultas de mídia para o layout da página e consultas de contêiner para os componentes da página.
Aqui, a estrutura geral da página tem um elemento main e um aside.
Existem objetos de mídia nos dois elementos.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
Uma consulta de mídia aplica um layout de grade aos elementos main e aside quando a
janela de visualização é mais larga que 45em.
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
A regra de consulta de contêiner para os objetos de mídia permanece a mesma:
só aplica um layout flexbox horizontal se o elemento que o contém for mais largo que 25em.
As consultas de contêiner são um divisor de águas para os microlayouts. Seus componentes podem ser independentes, independentemente da janela de visualização do navegador.
Teste seu conhecimento
Teste seus conhecimentos sobre microlayouts.
Grid e flexbox são úteis em microlayouts?
Anteriormente, você aprendeu sobre layouts de macro no nível da página. Agora você conhece os microlayouts no nível do componente.
Em seguida, você se aprofundará nos elementos básicos do seu conteúdo e aprenderá como tornar suas imagens responsivas. Primeiro, você vai aprender sobre a tipografia responsiva.