Layout CSS

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

O site da Biblioteca da Ribeira ganha disposição: menu em linha, cartões lado a lado, grade no acervo. Flexbox é o layout do projeto-fio. Grid aparece como ferramenta extra. float só entra para imagem com texto ao lado e como ideia de legado. Nuno Freire e o livro O Telhado de Palha continuam fictícios.

O exemplo deste capítulo é 11-layout-css, no pacote que acompanha o volume. Em estilos.css, mude uma coisa (gap do .menu ou flex do .cartao), preveja, recarregue e confira em janela larga e estreita.

O CSS no disco descreve o fluxo. O navegador calcula as caixas. 127.0.0.1 mostra o mesmo cálculo por HTTP local. Publicar um layout que só “funciona” em 1400 px de monitor não serve no celular de quem visita.

O que você vai aprender

• Reconhecer o fluxo normal.
• Usar Flexbox no cabeçalho e nos cartões.
• Ler uma grade simples.
• Limitar float a imagem + texto e a código antigo.
• Aplicar position com cuidado e media queries mobile-first.

Fluxo normal

Sem Flexbox e sem Grid, blocos empilham de cima para baixo. Isso já é layout. Muitos problemas se resolvem com margem e max-width, sem tirar o elemento do fluxo.

display: none remove do fluxo. visibility: hidden esconde e reserva o espaço.

Flexbox no projeto-fio

Flexbox alinha itens numa direção. O cabeçalho da Ribeira usa display: flex na faixa: marca à esquerda, menu à direita, flex-wrap para não esmagar.

.faixa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cartoes { display: flex; flex-wrap: wrap; gap: 1rem; }
.cartao { flex: 1 1 16rem; }

flex: 1 1 16rem deixa o cartão crescer, encolher e partir de 16 rem. Mude só o gap do menu para 1.5rem. Recarregue. O espaço entre Início e Acervo deve aumentar.

Grid

Grid divide a área em linhas e colunas ao mesmo tempo. Útil para o acervo em cartões uniformes.

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

Não precisa de Grid para o menu. Flexbox já resolve.

Float, só o recorte

float nascia para texto ao redor de imagem. Ainda serve para isso, com um agrupador que “limpa” (clear).

Não construa o cabeçalho da Ribeira com float. Código antigo na internet ainda usa; você reconhece, não copia como layout de página.

.float-img {
  float: left;
  margin: 0 1rem 0.5rem 0;
  max-width: 12rem;
}
.limpar::after {
  content: "";
  display: block;
  clear: both;
}

Position, media queries, mobile-first

position: relative desloca sem tirar o espaço original. absolute tira do fluxo. fixed cola na janela. O skip-link usa absolute para sair da tela até o foco.

Mobile-first: regras gerais para tela estreita; @media (min-width: …) para telas maiores. O exemplo também tem um teto estreito para o cabeçalho:

@media (max-width: 40rem) {
  .faixa { align-items: flex-start; }
}

Erro comum: usar float no menu e position: absolute em tudo “para colar”. No celular os itens se sobrepõem. Prefira Flexbox e wrap.

Disco, 127.0.0.1 e publicação

Redimensione a janela no navegador. O arquivo no disco não tem “modo celular”: quem calcula é a viewport. Em http://127.0.0.1:8765/exemplos/11-layout-css/ teste 320 px de largura. Publicar sem essa conferência entrega um site que só o seu monitor conhece.

Atividades

1. Por que o menu da Biblioteca da Ribeira usa Flexbox e não float?
2. Qual a diferença de papel entre .cartoes (flex) e .grade (grid) neste volume?
3. position: fixed no cabeçalho resolve sozinho o layout em tela estreita?

Respostas comentadas

1. Flexbox alinha, envolve (wrap) e espaça com gap. float foi feito para texto ao redor de imagem e vira legado no layout de página.
2. Flexbox é o padrão do projeto-fio (faixa, menu, cartões que crescem). Grid entra quando você quer colunas explícitas, como uma prateleira de títulos.
3. Não. fixed só cola o bloco na janela. Sem Flexbox, wrap e media query, o menu continua apertado ou sobreposto. Teste em 127.0.0.1 com a janela estreita antes de pensar em publicar.