Micro layouts

Quando pensamos em layouts, geralmente pensamos em designs de nível de página. No entanto, componentes menores da página podem ter layouts próprios independentes.

Idealmente, esses layouts em nível de componente se ajustarão automaticamente, independentemente 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, você precisa garantir que o componente possa se ajustar ao contêiner.

Um layout de duas colunas, uma larga e outra estreita. Os objetos de mídia são dispostos de maneira diferente, dependendo se estiverem na coluna larga ou estreita.

Grade

A grade CSS não é apenas para layouts no nível da página. Isso também funciona bem para os componentes que residem neles.

Neste exemplo, os atributos ::before e ::after pseudoelementos criam linhas decorativas em lado de um cabeçalho. O cabeçalho em si é um contêiner de grade. O indivíduo 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;
}
Ferramentas para desenvolvedores no Firefox mostrando uma sobreposição de grade. Ferramentas para desenvolvedores no Chrome mostrando uma sobreposição de grade.
Navegadores de desktop, como o Firefox e o Chrome, têm ferramentas para desenvolvedores que podem mostrar linhas de grade e áreas sobrepostas no seu design.

Aprenda a inspecionar layouts de grade no Chrome DevTools.

Flexbox

Como o nome sugere, você pode usar flexbox para tornar seu os componentes flexíveis. É possível declarar quais elementos do componente precisam ter um tamanho mínimo ou máximo e deixar os outros elementos se flexibilizarem para caber de maneira adequada.

Neste exemplo, a imagem ocupa um quarto do espaço disponível e ocupa os outros três quartos. Mas 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;
}
Ferramentas para desenvolvedores no Firefox mostrando uma sobreposição de flexbox. Ferramentas para desenvolvedores no Chrome mostrando uma sobreposição em Flexbox.
As ferramentas para desenvolvedores no Firefox e no Chrome ajudam a visualizar a forma dos componentes Flexbox.

Saiba como inspecionar layouts flexbox. no Chrome DevTools.

Consultas em contêiner

O Flexbox permite projetar do conteúdo para fora. É possível especificar os parâmetros elementos (qual o tamanho deles, qual deve ser a largura) e deixe o navegador a descobrir a implementação final.

Mas o componente em si não tem conhecimento 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, seus 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 o "Contêiner" é a janela de visualização do navegador. as consultas de mídia informam as dimensões contêiner no nível da página.

Para gerar um relatório sobre 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 inglês documentos, é o eixo horizontal. Os estilos são alterados com base a largura do contêiner.

Se um componente estiver dentro de um desses contêineres, você poderá aplicar estilos de maneira semelhante de como você 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, o flexbox não são aplicados. A imagem e o texto que aparecem sã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 consultas de contêiner, é possível definir o estilo dos componentes de maneira independente. É possível escrever regras com base na largura do elemento contêiner; a largura do janela de visualização não importa mais.

Dois contêineres de tamanhos diferentes.

Combinar consultas

Você pode usar consultas de mídia para o layout da página e consultas de contêiner para o na página.

Aqui, a estrutura geral da página tem um elemento main e um aside. Há objetos de mídia em ambos os 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 o janela de visualização é mais larga do que 45em.

@media (min-width: 45em) {
  body
{
   
display: grid;
   
grid-template-columns: 3fr 1fr;
 
}
}

A regra de consulta do contêiner para os objetos de mídia permanece a mesma: só vai aplicar um layout flexbox horizontal se o elemento que o contém for mais largo que 25em.

Um layout de duas colunas, uma larga e outra estreita. 
Os objetos de mídia são dispostos de maneira diferente, dependendo se estiverem na coluna larga ou estreita.

As consultas em contêineres são um divisor de águas para microlayouts. Seus componentes podem ser autônomos, independentemente da janela de visualização do navegador.

Teste seu conhecimento

Teste seus conhecimentos sobre microlayouts.

Grid e flexbox são úteis para microlayouts?

Falso
Verdadeiro

Anteriormente, você aprendeu sobre layouts de macro no nível da página. Agora você conhece microlayouts no nível do componente.

Em seguida, você vai se aprofundar nos elementos básicos do seu conteúdo e aprender como tornar suas imagens responsivas. Primeiro, você vai aprender sobre tipografia responsiva.