Linha muito comprida cansa o olho: com o g-m o texto para em 768 px, a medida confortável de leitura, mesmo em monitor grande.
Container CSS
A "caixa" que centraliza o conteúdo da página e não deixa ele esticar demais em tela grande — <div class="g"> — com respiro nas laterais no celular.
O que é
Num monitor grande, um texto que vai de uma ponta à outra fica difícil de ler e o site parece "espalhado". O container resolve isso: é uma caixa que ocupa a largura toda até um limite (1200 px no padrão), fica centralizada, e deixa um respiro de 16 px nas laterais para o conteúdo não encostar na borda do celular. Quase todo site usa um container em volta do conteúdo de cada seção.
É só CSS. g é o container padrão (até 1200 px). Se quiser outro limite, troque pelo tamanho: g-pp (380), g-p (576), g-m (768), g-g (992), g-gg (1200, o mesmo que g), g-xg (1400), g-xxg (1600). g-fl não tem limite (largura toda, com respiro). g0 tira o respiro das laterais e o limite. A faixa de fundo colorida fica fora do container, e o container vai dentro dela: assim a cor vai de ponta a ponta e o conteúdo fica alinhado.
Quando usar
- Conteúdo de cada seção da página:
<section><div class="g">…</div></section>. - Texto de blog/artigo:
g-m(768 px) — linha no tamanho confortável de ler. - Formulário de contato ou login centralizado:
g-p(576 px) oug-pp(380 px). - Painel, tabela larga, galeria:
g-xg/g-xxgoug-fl.
Comece aqui
-
1
Coloque o SW Core no
<head>. O container está no arquivo principal.<link rel="stylesheet" href="swcore/swcore.min.css"> -
2
Envolva o conteúdo da seção com
class="g". Ele centraliza e para de crescer em 1200 px.<section> <div class="g"> <h2>Nossos serviços</h2> <p>Corte, barba e sobrancelha com hora marcada.</p> </div> </section>
Todas as variações
Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.
1. Os limites de largura
Cada barra é um container com o seu limite. Os que passam da largura deste quadro ocupam o quadro todo — numa tela maior, eles param no limite e ficam centralizados.
g-pp · 380 px
<div class="g-pp bg-pri-soft bd bd-pri r-p py-p t-p t-ct">g-pp · 380 px</div>
g-p · 576 px
<div class="g-p bg-pri-soft bd bd-pri r-p py-p t-p t-ct">g-p · 576 px</div>
g-m · 768 px
<div class="g-m bg-pri-soft bd bd-pri r-p py-p t-p t-ct">g-m · 768 px</div>
g-g · 992 px
<div class="g-g bg-pri-soft bd bd-pri r-p py-p t-p t-ct">g-g · 992 px</div>
g · 1200 px
<div class="g bg-pri-soft bd bd-pri r-p py-p t-p t-ct">g · 1200 px</div>
g-gg · 1200 px
<div class="g-gg bg-pri-soft bd bd-pri r-p py-p t-p t-ct">g-gg · 1200 px</div>
g-xg · 1400 px
<div class="g-xg bg-pri-soft bd bd-pri r-p py-p t-p t-ct">g-xg · 1400 px</div>
g-xxg · 1600 px
<div class="g-xxg bg-pri-soft bd bd-pri r-p py-p t-p t-ct">g-xxg · 1600 px</div>
2. Largura toda e sem respiro
O respiro de 16 px das laterais aparece como a folga entre a borda da barra e o texto.
g-fl — o texto começa 16 px para dentro
<div class="g-fl bg-pri-soft bd bd-pri r-p py-p t-p">g-fl — o texto começa 16 px para dentro</div>
g-fl g0 — o texto encosta na borda
<div class="g-fl g0 bg-pri-soft bd bd-pri r-p py-p t-p">g-fl g0 — o texto encosta na borda</div>
Tabela de opções
| Palavra | O que faz | Exemplo |
|---|---|---|
| Container | ||
g | Padrão: até 1200 px, centralizado, respiro de 16 px nas laterais. | class="g" |
g-pp | Até 380 px. | class="g-pp" |
g-p | Até 576 px. | class="g-p" |
g-m | Até 768 px. | class="g-m" |
g-g | Até 992 px. | class="g-g" |
g-gg | Até 1200 px (o mesmo que g). | class="g-gg" |
g-xg | Até 1400 px. | class="g-xg" |
g-xxg | Até 1600 px. | class="g-xxg" |
g-fl | Largura toda, sem limite; mantém o respiro de 16 px. | class="g-fl" |
| Ajuste | ||
g0 | Tira o respiro das laterais e o limite de largura (fica 100% e encostado). | class="g-fl g0" |
mx-au | Centraliza qualquer bloco com largura menor que o pai (o container já faz isso sozinho). | class="mx-au" |
Receitas prontas — usos reais
Situações que aparecem em quase todo site. Copie a que servir.
O padrão de toda página: faixa de ponta a ponta, conteúdo alinhado
Ao vivo
Studio SolMenu
Conteúdo da página
O container centraliza e limita a largura; a faixa colorida atrás vai de ponta a ponta.
<header class="bg-pri">
<div class="g py-m flx j-sb alc">
<strong>Studio Sol</strong>
<span class="t-p">Menu</span>
</div>
</header>
<main>
<div class="g py-g">
<strong class="t-txt">Conteúdo da página</strong>
<p>O container centraliza e limita a largura; a faixa colorida atrás vai de ponta a ponta.</p>
</div>
</main>
<footer class="bg-sur bd-t bd-mut">
<div class="g py-m t-p">Rodapé — mesmo alinhamento do topo e do conteúdo</div>
</footer>
Artigo de blog numa largura boa de ler
Ao vivo
<article class="g-m">
<strong class="t-txt t-gg">5 cuidados com a barba no verão</strong>
<p>Linha muito comprida cansa o olho…</p>
</article>
Formulário de login centralizado
Ao vivo
<form class="g-pp bg-sur bd r-m py-g flx f-cl gap-m">
<strong class="t-txt t-ct">Entrar no painel</strong>
<div sw-fld><label for="email">E-mail</label><input sw-inp id="email" type="email" placeholder="voce@empresa.com"></div>
<button sw-btn="pri">Entrar</button>
</form>Precisa de quê
swcore.min.css— todas as classes desta página.
Cuidados — erros comuns
- Não coloque o fundo colorido da faixa no próprio container: a cor para em 1200 px e fica uma "caixa" no meio da tela. Cor na
<section>de fora;gdentro. - Não coloque um container dentro de outro: o respiro lateral dobra.
g0não é "sem respiro com limite": ele também tira o limite de largura. Para limite sem respiro, use o container normal e zere no seu CSS só o padding.- O container já tem padding lateral; classes
px-*no mesmo elemento trocam esse respiro (tudo bem, se for de propósito).
O que ele não faz
- O respiro lateral é fixo em 16 px (
--sw-s-m) em qualquer tela. - Não há container com limite diferente por tela (ex.: 768 no tablet e 1200 no PC); o limite só "aparece" quando a tela passa dele.
