Quando pensamos em layouts, geralmente pensamos em designs de página. No entanto, componentes menores dentro da página podem ter seus próprios layouts independentes.
O ideal é que esses layouts de componentes se ajustem automaticamente, independentemente da posição 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 ambos. Sem saber ao certo onde um componente vai parar, é necessário garantir que ele possa se ajustar ao contêiner.
Grade
A grade CSS não é apenas para layouts de página. Ela também funciona bem para os componentes que estão dentro dela.
Neste exemplo, os ::before e ::after
pseudoelementos criam linhas decorativas em ambos os
lados de um cabeçalho. O cabeçalho em si é 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, você pode usar o Flexbox para tornar seus componentes flexíveis. É possível declarar quais elementos no componente devem ter um tamanho mínimo ou máximo e permitir que os outros elementos se ajustem de acordo.
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 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 do Flexbox no Chrome DevTools.
Consultas em contêiner
O Flexbox permite que você crie o design do conteúdo. É possível especificar os parâmetros dos elementos (quão estreitos ou largos eles devem ficar) e deixar que o navegador descubra a implementação final.
No entanto, o componente em si não tem consciência do contexto. Ele não sabe se está sendo usado 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 estão.
Com 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 de página.
Para informar as dimensões de qualquer contêiner, use consultas de contêiner.
Para começar, defina quais elementos atuam 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ê vai mudar 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 à aplicação de 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 do Flexbox não serão aplicados. A imagem e o texto aparecem em ordem vertical.
No entanto, se o elemento contido for mais largo que 25em, a imagem e o texto vão aparecer lado a lado.
Com consultas de contêiner, é possível estilizar componentes de forma independente. Você pode escrever regras com base na largura do elemento contido. A largura da janela de visualização não importa mais.
Combinar consultas
É possível usar consultas de mídia para o layout da página e consultas de contêiner para os componentes dentro da página.
Aqui, a estrutura geral da página tem um elemento main e um elemento aside.
Há 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ó aplique um layout horizontal do Flexbox se o elemento contido for mais largo que 25em.
As consultas de contêiner são uma mudança radical para microlayouts. Seus componentes podem ser independentes da janela de visualização do navegador.
Teste seu conhecimento
Teste seu conhecimento sobre microlayouts.
A grade e o Flexbox são úteis para microlayouts?
Antes, você aprendeu sobre macrolayouts de página. Agora você conhece os microlayouts de componentes.
Em seguida, você vai se aprofundar nos blocos de construção do conteúdo e aprender a tornar as imagens responsivas. Primeiro, você vai aprender sobre tipografia responsiva.