SWCore / CSS / Container

Container CSS

Largura máxima centralizada com respiro lateral — o invólucro de toda página, na mesma escala pp-xxg do espaçamento.

O que é

Container centralizado com teto de largura e respiro nas bordas, no padrão que a maioria dos sites usa como wrapper principal. 7 teto de largura, de 380px a 1600px.

Como funciona

.g sozinho é igual a .g-gg (1200px) — o mais comum, por isso ganhou o nome curto.

Exemplos

A escala inteira de teto Ao vivo
g-pp — 380px
g-p — 576px
g-m — 768px
g-g — 992px
g (= g-gg) — 1200px
g-xg — 1400px
g-xxg — 1600px
<div class="g-pp">máx 380px</div>
<div class="g-p">máx 576px</div>
<div class="g-m">máx 768px</div>
<div class="g-g">máx 992px</div>
<div class="g">máx 1200px — .g sozinho = .g-gg, o mais usado</div>
<div class="g-xg">máx 1400px</div>
<div class="g-xxg">máx 1600px</div>
Largura total e sem respiro Ao vivo
.g-fl — sem teto de largura, mas o respiro lateral continua
.g-fl .g0 — largura total e sem respiro: encosta na borda 
<!-- ocupa toda a largura, mas mantém o respiro nas bordas -->
<div class="g-fl">…</div>

<!-- zera o respiro (combine com qualquer g-*) -->
<div class="g-fl g0">…</div>

<!-- típico de faixa colorida que sangra na tela inteira,
     com o conteúdo dela num container normal por dentro -->
<section class="g-fl g0" style="background: var(--sw-pri)">
  <div class="g">conteúdo alinhado com o resto do site</div>
</section>
O padrão de página Ao vivo
cabeçalho — dentro do container
Conteúdo

O container centraliza e limita a largura; a faixa colorida atrás vai de ponta a ponta.

rodapé — mesmo alinhamento
<header style="background: var(--sw-pri)">
  <div class="g">…</div>
</header>

<main>
  <div class="g">…</div>
</main>

<footer style="background: var(--sw-sur)">
  <div class="g">…</div>
</footer>

<!-- a faixa vai de ponta a ponta; o .g mantém tudo alinhado no meio -->
Qual largura escolher Ao vivo

.g (1200px) é o padrão da maioria dos sites e resolve quase tudo.

.g-m (768px) é ótimo pra texto corrido: linha longa demais cansa a leitura — artigo e post ficam melhores estreitos.

.g-xg e .g-xxg servem pra painel, tabela larga e galeria, onde o espaço extra é aproveitado de verdade.

<article class="g-m">texto corrido — linha confortável de ler</article>
<div class="g">página comum</div>
<div class="g-xxg">painel com tabela larga</div>

Atributos

Nenhum.

Variantes

g-pp · g-p · g-m · g-g · g-gg (= g) · g-xg · g-xxg
teto de largura — 380 · 576 · 768 · 992 · 1200 · 1400 · 1600px
g-fl
sem teto de largura (100%, mas mantém o respiro lateral)
g0
zera o respiro lateral (combine com qualquer g-*)

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.

← AnteriorBreakpoints Próximo →Grid