Layout, Flex e Grid

Até agora o CSS da Casa da Restinga pintou texto e caixa. Este capítulo organiza o espaço: o que fica ao lado, o que empilha, o que ocupa a página inteira.

O exemplo está em exemplos/10-layout-flex-grid/. A casa é fictícia, em Natal. Este volume tem 23 capítulos.

Regra deste volume: Grid monta a página. Flex monta o componente. float aparece só como história, não como layout de site.

Trabalhe na cópia inicio da etapa. Leia e digite o código; mude uma coisa. Antes de recarregar, anote sua previsão. Depois confira com a referência completa. Se nada mudar, confira o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo podem ser digitados no console; o exemplo completo mostra a aplicação daquela etapa.

O que você vai aprender

• Ler o modelo de caixa: conteúdo, padding, borda, margem.
• Usar box-sizing: border-box uma vez no projeto.
• Separar display: block, inline, inline-block, flex e grid.
• Alinhar peças com Flex (justify-content, align-items).
• Desenhar a página com Grid (fr e grid-template-areas).

O modelo de caixa

Cada elemento visível é uma caixa. De fora para dentro: margem (espaço até o vizinho), borda, padding (espaço interno), conteúdo.

A cor de fundo pinta padding e conteúdo. Não pinta a margem.

Display

display diz como a caixa se comporta no fluxo e o que você pode medir.

• inline — segue o texto. Largura e altura que você declara são ignoradas.
• block — ocupa a linha. Você controla largura, altura, padding e margem. div e p nascem assim.
• inline-block — tenta ficar na linha, mas aceita medidas.
• flex e inline-flex — por fora como bloco (ou linha); por dentro, alinhamento no eixo.
• grid e inline-grid — por dentro, linhas e colunas.
• table — deixe para a tag table, não para fingir tabela com div.

Padding, borda e margem

.cardapio {
  border: 3px solid #c45c26;
  padding: 0.5rem;
  margin: 1.5rem;
  background: #f4efe6;
}

Se width e height “não pegam”, o display provavelmente é inline.

Mude uma coisa. Troque margin por 0 e aumente o padding. Preveja: os vizinhos colam, o miolo ganha ar. Recarregue e confira.

Erro comum: empilhar margem em todos os filhos e não entender o “buraco” entre dois p. Margens verticais de blocos podem colapsar.

box-sizing: border-box

Por padrão, width: 200px mede só o conteúdo. Padding e borda somam por fora. Encaixar colunas vira conta chata.

border-box inclui padding e borda nos 200px. Uma vez no projeto basta:

* {
  box-sizing: border-box;
}

Coloque no topo de estilos.css. Não repita em cada classe.

Mude uma coisa. Comente o * { box-sizing: border-box; }. Preveja a caixa estourar a coluna. Recarregue e confira. Depois restaure.

Erro comum: width: 100% mais padding grande sem border-box. A barra de rolagem horizontal aparece “do nada”.

Página em grid, peça em flex

Grid para a página

A home da Restinga tem cabeçalho, miolo, faixa lateral e rodapé. Isso é um mapa de regiões. Grid nomeia as áreas e encaixa o HTML nelas.

Flex para o componente

O menu do topo, a fileira de preços, os botões de uma linha: um eixo, peças que se empurram. Flex resolve o componente.

Não monte a página inteira só com Flex “porque é mais simples”. Também não force Grid em três botões.

Mude uma coisa. No exemplo, identifique uma região de página (header, main, aside) e uma fileira de botões. Preveja: a primeira usa Grid; a segunda, Flex. Recarregue e confira no inspetor o display computado.

Erro comum: display: flex no body e tentar fingir colunas de jornal. O eixo único não substitui o mapa da página.

Flex: eixo e distribuição

display: flex no pai controla os filhos. Por fora, o pai continua um bloco.

<div class="faixa">
  <span>Café coado</span>
  <span>Coco</span>
  <span>Mandioca</span>
</div>
<style>
  .faixa {
    display: flex;
    border: 1px solid #0d5c63;
  }
</style>

flex-direction

row é o padrão (esquerda para a direita). row-reverse inverte a ordem visual. column empilha. A ordem no HTML não muda: só o desenho.

justify-content

Trabalha no eixo principal. flex-start, flex-end, center, space-between (primeiro numa ponta, último na outra), space-around.

align-items

Trabalha no eixo cruzado. center centra na vertical quando a faixa é uma linha. Antes do Flex, isso era um quebra-cabeça.

Mude uma coisa. Ponha justify-content: space-between na faixa. Preveja os três nomes nas pontas e no meio. Recarregue e confira.

Erro comum: aplicar justify-content no filho. A regra mora no pai flex.

Flex: crescer e combinar

flex-grow diz quanto do espaço livre cada filho come. 1, 2 e 3 somam 6: o primeiro leva 1/6.

.preco { display: flex; }
.preco .nome { flex-grow: 1; }
.preco .valor { flex-grow: 0; }

O nome estica. O valor fica no tamanho do texto. Combine com align-items: center para alinhar a linha do cardápio.

Mude uma coisa. Troque o flex-grow do nome para 0. Preveja um buraco vazio à direita. Recarregue e confira.

Erro comum: width fixa brigando com flex-grow. Se a largura já trava, o crescimento não aparece.

Grid: frações e áreas

.galeria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

grid-template-columns

1fr 1fr são duas colunas iguais. fr é fração do espaço livre, depois das frestas. 1fr 2fr 1fr vira 25%, 50%, 25%.

gap (ou row-gap e column-gap) é a calha entre as células.

grid-template-areas

.pagina {
  display: grid;
  grid-template-areas:
    "cabecalho cabecalho lateral"
    "miolo     .         lateral"
    "rodape    rodape    rodape";
}
.cabecalho { grid-area: cabecalho; }
.miolo { grid-area: miolo; }
.lateral { grid-area: lateral; }
.rodape { grid-area: rodape; }

O ponto . é célula vazia. Os nomes em grid-area não precisam copiar a classe; só precisam bater com o mapa.

Mude uma coisa. No mapa, faça o miolo ocupar as duas primeiras colunas da segunda linha. Preveja a lateral só à direita. Recarregue e confira.

Erro comum: repetir um nome de área de forma desconexa (um buraco no meio do mesmo nome). O retângulo da área precisa ser contínuo.

Float ficou no passado

float: left empurrava caixas para a margem, como uma imagem no jornal. Era o jeito “à prova de navegador velho” de colocar bloco ao lado de bloco.

As caixas flutuadas não sobem umas pelas outras como você espera. A terceira caixa não ocupa o buraco ao lado da primeira se a segunda ainda estiver no caminho.

Neste volume, não use float para montar a página. Se um texto antigo citar float e clear, reconheça: é layout antigo. Página nova: Grid. Componente: Flex. Imagem com texto ao lado, se precisar, ainda pode flutuar — e só isso.

Arquivo no disco: as regras. Página no navegador: o mapa. Teste em 127.0.0.1. Publicação não é pedida.

Mude uma coisa. No exemplo, não adicione float no header. Preveja o cabeçalho continuar no Grid. Confira.

Erro comum: float no body “para ficar moderno”. O resultado é o contrário: layout frágil.

Atividades

1. O que a margem faz que o padding não faz?
2. Por que este volume põe * { box-sizing: border-box; } uma vez?
3. Grid ou Flex: cabeçalho + miolo + rodapé da home da Restinga?
4. Por que float não monta a página deste volume?

Respostas comentadas

1. Margem é o espaço fora da borda, até o vizinho, e não ganha a cor de fundo. Padding é o espaço dentro, e ganha.
2. Para width incluir borda e padding. Sem isso, 100% mais padding estoura a linha.
3. Grid. São regiões da página. O menu dentro do cabeçalho pode ser Flex.
4. O comportamento é peculiar, as caixas não sobem no buraco, e Grid/Flex resolvem o mapa com menos truque.

Referências

• Modelo de caixa
• box-sizing
• Flexbox
• Grid
• float