Como Organizar Conteúdo em Colunas e Seções

Aprenda a estruturar páginas com grid, flex e landmarks semânticos. Crie layouts responsivos, escaneáveis e consistentes em qualquer dispositivo.Nesse artigo você verá:

1. HTML semântico e landmarks
2. Sistemas de colunas (grid/flex)
3. Gutters, espaçamentos e ritmo
4. Responsividade: breakpoints e container queries
5. Subgrid e layouts aninhados
6. Padrões práticos de seção
7. Exemplos completos em código
8. Erros comuns
9. FAQ

HTML semântico e landmarks

Estruture a página com regiões claras. Use landmarks para navegação por leitores de tela.

<header role="banner">...</header>
<nav aria-label="Principal">...</nav>
<main id="conteudo" role="main">
  <section aria-labelledby="sec-beneficios">
    <h2 id="sec-beneficios">Benefícios</h2>
    ...
  </section>
  <aside aria-label="Complementos">...</aside>
</main>
<footer role="contentinfo">...</footer>

Sistemas de colunas (grid/flex)

• Grid: controle bidimensional. Ideal para colunas e linhas.
• Flex: eixo único. Ótimo para barras e cards fluídos.
• Híbrido: grid para macro. flex para micro.

.container{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap:clamp(12px, 2vw, 24px); }
.col-4{ grid-column: span 4; } .col-6{ grid-column: span 6; } .col-12{ grid-column: span 12; }
@media (max-width: 900px){ .col-4, .col-6{ grid-column: span 12; } }

Gutters, espaçamentos e ritmo

Padronize gaps. Defina uma escala consistente.

:root{
  --space-1: 8px; --space-2: 12px; --space-3: 16px;
  --space-4: 20px; --space-5: 24px; --space-6: 32px;
}
.section{ padding-block: var(--space-6); }
.grid{ display:grid; gap: var(--space-4); }
.stack > * + *{ margin-block-start: var(--space-3); }

Responsividade: breakpoints e container queries

Projete pelo conteúdo. Não só pelo device.

/* Breakpoints clássicos */
@media (max-width: 1200px){ .container{ padding-inline:20px; } }
@media (max-width: 900px){ .hide-md{ display:none; } }

/* Container queries modernas */
.wrapper{ container-type: inline-size; }
.card-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
@container (max-width: 700px){ .card-list{ grid-template-columns:1fr 1fr; } }
@container (max-width: 420px){ .card-list{ grid-template-columns:1fr; } }

Subgrid e layouts aninhados

Subgrid alinha elementos internos ao grid do pai. Ele preserva gutters e ritmo.

.page{ display:grid; grid-template-columns: repeat(12, 1fr); gap:24px; }
.section-grid{
  display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; gap: subgrid;
}

Padrões práticos de seção

• Hero 2 colunas: texto + mídia. CTA destacado.
• Features 3 colunas: cards com ícone e título curto.
• Conteúdo + Aside: artigo e barra lateral contextual.
• Grid de posts: 3 colunas desktop. 1 coluna mobile.

Exemplos completos em código

Hero em 2 colunas

<section class="section hero wrapper">
  <div class="container grid-hero">
    <div class="hero__text">
      <p class="eyebrow">Soluções Web</p>
      <h1>Hospedagem rápida e segura</h1>
      <p class="lead">Performance, segurança e suporte. Tudo no mesmo lugar.</p>
      <button class="btn-prim">Escolher plano</button>
    </div>
    <figure class="hero__media">
      <img src="hero.png" alt="Painel de controle de hospedagem">
    </figure>
  </div>
</section>

.grid-hero{
  display:grid; grid-template-columns: 1.2fr 1fr; align-items:center; gap:32px;
}
@media (max-width: 900px){ .grid-hero{ grid-template-columns:1fr; } }
.eyebrow{ text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:#2563eb; }
.lead{ color:#6b7280; }
.btn-prim{ background:#2563eb; color:#fff; border:0; padding:14px 20px; border-radius:12px; cursor:pointer; }
.btn-prim:hover{ filter:brightness(.95); }

Seção de features em 3 colunas

<section class="section features wrapper">
  <div class="container grid grid-3">
    <article class="card"><h3>Alta Performance</h3><p>SSD, cache e baixa latência.</p></article>
    <article class="card"><h3>Segurança Avançada</h3><p>SSL, WAF e varredura antivírus.</p></article>
    <article class="card"><h3>Suporte Ativo</h3><p>Acompanhamento técnico de verdade.</p></article>
  </div>
</section>

.grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:24px; }
@media (max-width: 900px){ .grid-3{ grid-template-columns:1fr; } }
.card{ background:#fff; border-radius:14px; padding:18px 20px; box-shadow:0 10px 20px rgba(0,0,0,.06); }
.card h3{ margin:0 0 6px; font-size:1.1rem; }
.card p{ margin:0; color:#6b7280; }

Artigo com aside

<main class="section wrapper">
  <div class="container layout-article">
    <article>
      <h2>Guia de SEO técnico</h2>
      <p>Estrutura, rastreamento e performance.</p>
      ...
    </article>
    <aside>
      <h3>Mais lidos</h3>
      <ul><li>Como acelerar o WordPress</li><li>Segurança prática</li></ul>
    </aside>
  </div>
</main>

.layout-article{
  display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:28px;
}
@media (max-width: 1100px){ .layout-article{ grid-template-columns:1fr; } }
article > * + *{ margin-block-start: 12px; }

Grade fluída por auto-fit

.auto-grid{
  display:grid; gap:20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

Erros comuns

• Gutters inconsistentes entre seções.
• Texto muito largo. Linhas cansativas.
• Quebras de coluna sem ordem lógica.
• Falta de landmarks e títulos claros.

Perguntas Frequentes (FAQ)

Quantas colunas devo usar?

Doze colunas dão flexibilidade. Em mobile, colapse para uma única coluna. Devo preferir grid ou flex?

Use grid para layout global. Use flex para alinhamentos locais. Como manter consistência entre páginas?

Defina tokens de espaçamento. Reaproveite padrões de seção. Como evitar linhas longas de texto?

Limite a largura do parágrafo. Use max-width entre 60–75 caracteres. Container queries valem a pena?

Sim. Elas adaptam o bloco ao seu espaço real. O ajuste fica mais preciso.Tags:

• Layout
• Grid CSS
• Flexbox
• Colunas
• Gutters
• Seções
• Responsividade
• Container Queries
• Subgrid
• Design de Interface
• UX
• Acessibilidade
• Landmarks
• Ritmo Visual
• Web Design

“É necessário construir frases curtas. Toda otimização dividirá em, no mínimo, duas frases.”