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 para onde 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.
Nesse 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 dispostos 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, flexbox permite flexibilizar seus componentes. É possível declarar quais elementos do componente precisam ter um tamanho mínimo ou máximo e permitir que os outros elementos sejam flexíveis para se ajustarem.
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 seus elementos (qual a limitação e a largura) e deixar o navegador descobrir 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 vão atuar como contêineres.
main,
aside {
container-type: inline-size;
}
Isso significa que você quer poder consultar a dimensão inline. Para documentos em inglês, esse é o eixo horizontal. Altere os estilos com base na largura do contêiner.
Se um componente estiver em um desses contêineres, você poderá aplicar estilos de maneira bastante semelhante às 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 serão 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.
As consultas de contêiner permitem estilizar componentes de maneira independente. A largura da janela de visualização não é mais o que importa. Você pode escrever regras com base na largura do elemento que as contém.
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:
aplica um layout flexbox horizontal apenas 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ê vai se aprofundar nos elementos básicos do seu conteúdo. Você vai aprender a tornar suas imagens responsivas. Mas agora vamos explorar a tipografia responsiva.