Grid CSS

O que é

É o que organiza a página em colunas: 3 cards de serviço lado a lado, conteúdo + barra lateral, galeria de fotos 4 por linha. Você coloca class="l" no bloco de fora (a grade) e escolhe as colunas de três jeitos: colunas iguais (l-3 = 3 por linha), proporção (l-2-1 = uma coluna o dobro da outra) ou cada item diz quanto ocupa de uma régua de 12 partes (co8 + co4). No celular tudo fica um embaixo do outro, sem você fazer nada.

É só CSS (CSS Grid). A grade l tem 12 colunas invisíveis e um espaço médio (16 px) entre os itens. No celular (abaixo de 768 px) cada item ocupa a linha inteira. A partir de 768 px (tablet) as colunas aparecem. Para escolher outra largura de tela, use os sufixos da página Breakpoints (l-3-g, co6-m…). As linhas não precisam ser declaradas: quando a linha enche, o próximo item desce para a de baixo sozinho. Para alinhar poucos itens numa linha (ícone + texto, botões), use Flex, não grade.

Quando usar

• Cards de serviço, produtos, planos: l l-3.
• Galeria de fotos: l l-2-m l-4-g (2 no tablet, 4 no computador).
• Conteúdo + barra lateral: l l-3-1 (3/4 + 1/4).
• Formulário em 2 colunas com um campo largo: l com co6 nos campos lado a lado e co12 no campo largo.
• Números do painel (vendas, clientes, pedidos): l l-2-m l-4-g.

Comece aqui

1. 1

   Coloque o SW Core no <head>. A grade está no arquivo principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   l no bloco de fora + quantas colunas. Os filhos viram as colunas.

   Corte

   Barba

   Sobrancelha

   <div class="l l-3">
     <div>Corte</div>
     <div>Barba</div>
     <div>Sobrancelha</div>
   </div>

3. 3

   Estreite a janela abaixo de 768 px: os três empilham sozinhos.

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.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div class="l l-2-m l-4-g gap-m">
  <div class="bg-sur bd r-m p-m"><span class="t-pp t-upp ls-w">Vendas hoje</span><p class="t-xg t-txt fw6 mb-0">R$ 1.840</p></div>
  <div class="bg-sur bd r-m p-m"><span class="t-pp t-upp ls-w">Pedidos</span><p class="t-xg t-txt fw6 mb-0">37</p></div>
  <div class="bg-sur bd r-m p-m"><span class="t-pp t-upp ls-w">Clientes novos</span><p class="t-xg t-txt fw6 mb-0">9</p></div>
  <div class="bg-sur bd r-m p-m"><span class="t-pp t-upp ls-w">Ticket médio</span><p class="t-xg t-txt fw6 mb-0">R$ 49,70</p></div>
</div>

<form class="l gap-m">
  <div sw-fld class="co6"><label for="nome">Nome</label><input sw-inp id="nome"></div>
  <div sw-fld class="co6"><label for="tel">WhatsApp</label><input sw-inp id="tel"></div>
  <div sw-fld class="co12"><label for="msg">Mensagem</label><textarea sw-inp id="msg" rows="3"></textarea></div>
  <div class="co12"><button sw-btn="pri">Enviar</button></div>
</form>

<div class="l l-3-1 gap-g">
  <article class="bg-sur bd r-m p-g">…</article>
  <aside class="bg-sur bd r-m p-g">…</aside>
</div>

<div class="grd gap-p app">
  <header class="app-topo bg-sur bd r-p p-p t-ct">Topo</header>
  <aside class="app-lateral bg-sur bd r-p p-p t-ct">Lateral</aside>
  <main class="app-conteudo bg-sur bd r-p p-g t-ct">Conteúdo</main>
  <footer class="app-rodape bg-sur bd r-p p-p t-ct">Rodapé</footer>
</div>

<style>
  .app { grid-template-areas: "topo topo" "lateral conteudo" "rodape rodape";
         grid-template-columns: 1fr 3fr; }
  .app-topo { grid-area: topo; }       .app-lateral { grid-area: lateral; }
  .app-conteudo { grid-area: conteudo; } .app-rodape { grid-area: rodape; }
  @media (max-width: 767px) {             /* celular: tudo empilhado */
    .app { grid-template-areas: "topo" "conteudo" "lateral" "rodape";
           grid-template-columns: 1fr; }
  }
</style>

Precisa de quê

• swcore.min.css — todas as classes desta página.

Cuidados — erros comuns

• l-3 sozinho não faz nada: a grade é l. Escreva sempre os dois: class="l l-3".
• O co… vai no filho direto da grade, não na grade. E só funciona se o pai for l.
• co… é para l puro (régua de 12). Dentro de l-2…l-6 ou de uma proporção, quando as colunas da grade estão ligadas, o co é ignorado e cada item ocupa uma célula — escolha um dos dois jeitos: colunas iguais (l l-3) ou co nos filhos de um l.
• Dois tamanhos juntos (l-2-m l-4-g): o de largura maior vale quando a tela chega nele; antes disso, o menor. Abaixo do menor, um por linha.
• Com sufixo, o co só existe em 1, 2, 3, 4, 6 e 12 (co8-g não existe). Sem sufixo, de co1 a co12.
• Para alinhar ícone e texto ou uma fileira de botões, use flx (Flex), não a grade.

O que ele não faz

• Não tem classe para área nomeada (topo/lateral/conteúdo) nem para um item ocupar 2 linhas: isso fica no seu CSS, sobre grd ou l (receita acima).
• Não tem classe para mudar a ordem dos itens por tela.