SWCore / CSS / Grid

Grid CSS

CSS Grid de 12 colunas, mobile-first — N colunas iguais, proporção assimétrica, ou controle coluna a coluna por filho.

O que é

.l é um display:grid de verdade com 12 colunas e gap. Três formas de usar: colunas iguais (.l-3), proporção assimétrica (.l-1-2), ou controle por filho em cima das 12 colunas (.co8 + .co4), cada uma com sufixo de breakpoint.

Como funciona

No mobile TODO filho ocupa a linha inteira (grid-column: span 12), sem exceção — a grade só vira colunas a partir de 768px. A exceção é .l-1, que é 1 coluna sempre. Linhas: o grid cria as linhas sozinho conforme os filhos entram (grid implícito) — você controla o ritmo pelo número de colunas e pelo gap. Pra áreas nomeadas (header/aside/main/footer), o framework não tem utilitário: use .grd + grid-template-areas no seu próprio CSS (exemplo no fim).

Exemplos

Colunas iguais — l-2 a l-6 Ao vivo
1
2
1
2
3
1
2
3
4
1
2
3
4
5
6
<div class="l l-3 gap-m">
  <div>1</div><div>2</div><div>3</div>
</div>
<!-- 3 colunas a partir de 768px; 1 coluna no mobile -->

<div class="l l-1">sempre 1 coluna, não colapsa porque já é 1</div>
<div class="l l-4 l0">4 colunas coladas (l0 = gap zero)</div>
Proporção assimétrica — l-1-2, l-2-1, l-1-3, l-3-1 Ao vivo
1fr
2fr
2fr
1fr
1fr
3fr
3fr
1fr
<!-- clássico: conteúdo + barra lateral -->
<div class="l l-3-1 gap-g">
  <main>conteúdo (3fr)</main>
  <aside>barra lateral (1fr)</aside>
</div>

<!-- .l-1-2  .l-2-1  .l-1-3  .l-3-1 — todos a partir de 768px -->
Controle por filho — co1 a co12 (somam 12) Ao vivo
.co8
.co4
.co6
.co3
.co3
.co2
.co10
<!-- a grade tem 12 colunas; cada filho escolhe quantas ocupa -->
<div class="l gap-m">
  <div class="co8">ocupa 8 de 12</div>
  <div class="co4">ocupa 4 de 12</div>
</div>

<!-- com breakpoint: 1 coluna no mobile → 2 em 576 → 3 em 768 -->
<div class="l gap-m">
  <span class="co12 co6-p co4-m">responsivo</span>
  <span class="co12 co6-p co4-m">responsivo</span>
  <span class="co12 co6-p co4-m">responsivo</span>
</div>
<!-- os .coN-bp existem em 1, 2, 3, 4, 6 e 12 colunas -->
Linhas — o grid cria sozinho conforme os filhos entram Ao vivo
1
2
3
4
5
6
7 — .co6 puxa meia largura e a linha se ajusta
<!-- você NÃO declara linha: o grid abre uma nova a cada 3 filhos (l-3).
     O 7º item com .co6 ocupa metade da linha nova. -->
<div class="l l-3 gap-m">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
  <div class="co6">7</div>
</div>

<!-- altura da linha: deixe o conteúdo mandar, ou fixe no seu CSS
     com grid-auto-rows na grade -->
<div class="l l-3" style="grid-auto-rows: 12rem">…</div>
Áreas nomeadas — CSS Grid puro, por cima do .grd Ao vivo
header
aside
main
footer
<!-- o SWCore não tem utilitário de área nomeada de propósito:
     área é sempre específica do layout, então fica no SEU CSS.
     Use .grd (display:grid) e declare o template você mesmo. -->

<div class="grd layout-app">
  <header style="grid-area: hd">…</header>
  <aside  style="grid-area: side">…</aside>
  <main   style="grid-area: main">…</main>
  <footer style="grid-area: ft">…</footer>
</div>

<style>
.layout-app {
  grid-template-areas: "hd hd" "side main" "ft ft";
  grid-template-columns: 1fr 3fr;
  gap: var(--sw-s-m);
}
/* mobile: empilha tudo numa coluna só */
@media (max-width: 767px) {
  .layout-app {
    grid-template-areas: "hd" "main" "side" "ft";
    grid-template-columns: 1fr;
  }
}
</style>

Atributos

Nenhum.

Variantes

l
a grade — display:grid, 12 colunas, gap médio
l0
zera o gap
l-1
sempre 1 coluna, em qualquer largura (única que não colapsa)
l-2 · l-3 · l-4 · l-5 · l-6
N colunas iguais a partir de 768px (1 coluna no mobile)
l-1-2 · l-2-1 · l-1-3 · l-3-1
proporção assimétrica entre 2 colunas (≥768px)
l-2-p · l-1-2-p · l-2-1-p
template que ativa já em 576px
l-2-m · l-3-m · l-1-2-m · l-2-1-m
template que ativa em 768px
l-3-g · l-4-g
template que ativa em 992px
l-4-gg · l-6-gg
template que ativa em 1200px
co1 … co12 (no FILHO)
quantas das 12 colunas aquele filho ocupa, a partir de 768px
co{1,2,3,4,6,12}-{pp,p,m,g,gg,xg}
o mesmo, ativando no breakpoint escolhido — ex.: co12 co6-p co4-m
grd
display:grid puro, sem as 12 colunas — pra quando você define o template você mesmo

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

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

  • Não tem utilitário de ÁREA nomeada (grid-template-areas) nem de span de LINHA (grid-row) — essas duas coisas são sempre específicas do layout, então ficam no seu CSS, em cima de .grd ou .l.
  • Os .coN-bp com breakpoint existem só em 1, 2, 3, 4, 6 e 12 colunas (os divisores de 12); sem breakpoint, .co1 a .co12 existem todos.
← AnteriorContainer Próximo →Flex