Grid

O Arenito utiliza um Grid System baseado em CSS Grid com três modos para diferentes contextos de layout.

foundation/grid.csstokens/variables.cssAbrir no Figma

Grid	Colunas	Margin	Gutter	Uso
Primário	12	72px	32px	Uso geral (home, listagens, inserir)
Secundário	10	72px	56px	Formulários com stepper
Terciário	6	200px	96px	Portal de notícias

Tokens do grid

Variáveis CSS que controlam colunas, gutter e margin de cada modo do grid.

Token	Valor	Descrição
--grid-columns	12	Colunas do grid primário
--grid-gutter	32px	Gutter do grid primário
--grid-margin	72px	Margin do grid primário
--grid-columns-form	10	Colunas do grid secundário
--grid-gutter-form	56px	Gutter do grid secundário
--grid-columns-news	6	Colunas do grid terciário
--grid-gutter-news	96px	Gutter do grid terciário
--grid-margin-news	200px	Margin do grid terciário
--grid-max-width	1440px	Largura máxima do container

Grid primário (12 colunas)

Utilizado como grid padrão por todo o sistema: home, listagens, inserir, etc.

Propriedade	Valor
Colunas	12
Margin	72px
Gutter	32px
Width	Auto

<div class="container">
  <div class="row">
    <div class="col-12">Uma coluna (100%)</div>
  </div>

  <div class="row">
    <div class="col-6">Meia largura (50%)</div>
    <div class="col-6">Meia largura (50%)</div>
  </div>

  <div class="row">
    <div class="col-4">Um terço (33.33%)</div>
    <div class="col-4">Um terço (33.33%)</div>
    <div class="col-4">Um terço (33.33%)</div>
  </div>
</div>

Grid secundário (10 colunas)

Utilizado em telas de inserir que possuem stepper. O gutter maior (56px) garante mais respiro entre os campos.

Propriedade	Valor
Colunas	10
Margin	72px
Gutter	56px
Width	Auto

<div class="container">
  <div class="row-10">
    <div class="col-5">Campo 1 (50%)</div>
    <div class="col-5">Campo 2 (50%)</div>
    <div class="col-10">Campo longo (100%)</div>
  </div>
</div>

Grid terciário (6 colunas)

Utilizado exclusivamente no portal de notícias. O gutter e margin maiores criam um layout mais editorial, com mais respiro entre os blocos de conteúdo.

Propriedade	Valor
Colunas	6
Margin	200px
Gutter	96px
Width	Auto

<div class="container-news">
  <div class="row-6">
    <div class="col-6">Notícia destaque (100%)</div>
  </div>

  <div class="row-6">
    <div class="col-3">Notícia (50%)</div>
    <div class="col-3">Notícia (50%)</div>
  </div>

  <div class="row-6">
    <div class="col-2">Notícia (33%)</div>
    <div class="col-2">Notícia (33%)</div>
    <div class="col-2">Notícia (33%)</div>
  </div>
</div>

O grid terciário usa .container-news ao invés de .container, pois possui margin diferente (200px vs 72px).

Breakpoints

Pontos de quebra que definem o comportamento responsivo do grid em diferentes dispositivos.

Nome	Largura Mínima	Dispositivos
xs	< 576px	Mobile portrait
sm	>= 576px	Mobile landscape
md	>= 768px	Tablet
lg	>= 992px	Desktop
xl	>= 1200px	Desktop grande
xxl	>= 1440px	Desktop extra grande

Container

Centraliza e limita a largura do conteúdo.

<!-- Container padrão (margin 72px) -->
<div class="container">...</div>

<!-- Container notícias (margin 200px) -->
<div class="container-news">...</div>

<!-- Container fluido (100% da largura) -->
<div class="container-fluid">...</div>

<!-- Container com largura fixa por breakpoint -->
<div class="container-sm">  <!-- max-width: 540px em SM+ -->
<div class="container-md">  <!-- max-width: 720px em MD+ -->
<div class="container-lg">  <!-- max-width: 960px em LG+ -->
<div class="container-xl">  <!-- max-width: 1140px em XL+ -->
<div class="container-xxl"> <!-- max-width: 1440px em XXL+ -->

Colunas responsivas

Use classes com sufixos de breakpoint para controlar o layout em diferentes tamanhos de tela.

<div class="row">
  <!-- Mobile: 100%, Tablet: 50%, Desktop: 33.33% -->
  <div class="col-12 col-md-6 col-lg-4">Card 1</div>
  <div class="col-12 col-md-6 col-lg-4">Card 2</div>
  <div class="col-12 col-md-6 col-lg-4">Card 3</div>
</div>

col-{1-12}       → Todas as telas
col-sm-{1-12}    → >= 576px
col-md-{1-12}    → >= 768px
col-lg-{1-12}    → >= 992px
col-xl-{1-12}    → >= 1200px
col-xxl-{1-12}   → >= 1440px

Gap customizado

Controle o espaçamento entre colunas com classes utilitárias de gap.

<div class="row row-gap-none">   <!-- Sem espaçamento -->
<div class="row row-gap-xs">     <!-- 4px -->
<div class="row row-gap-sm">     <!-- 8px -->
<div class="row row-gap-md">     <!-- 16px -->
<div class="row row-gap-lg">     <!-- 20px -->
<div class="row row-gap-xl">     <!-- 24px -->
<div class="row row-gap-2xl">    <!-- 32px -->

Offset (deslocamento)

Desloque colunas para a direita usando classes de offset.

<div class="row">
  <!-- Coluna de 4 unidades, deslocada 2 para a direita -->
  <div class="col-4 offset-2">Centralizado</div>
</div>

Ordenação

Altere a ordem visual dos elementos sem modificar o HTML.

<div class="row">
  <div class="col-4 order-3">Aparece por último</div>
  <div class="col-4 order-1">Aparece primeiro</div>
  <div class="col-4 order-2">Aparece no meio</div>
</div>

<div class="order-first">  <!-- order: -1 -->
<div class="order-last">   <!-- order: 999 -->

Alinhamento

Controle o alinhamento vertical e horizontal dos itens dentro do grid.

Vertical (align-items):

<div class="row row-align-start">    <!-- Topo -->
<div class="row row-align-center">   <!-- Centro -->
<div class="row row-align-end">      <!-- Base -->
<div class="row row-align-stretch">  <!-- Esticar -->

Horizontal (justify-items):

<div class="row row-justify-start">   <!-- Início -->
<div class="row row-justify-center">  <!-- Centro -->
<div class="row row-justify-end">     <!-- Fim -->
<div class="row row-justify-stretch"> <!-- Esticar -->

Grids automáticos

Grids que se ajustam automaticamente com base no conteúdo ou número fixo de colunas.

<!-- Colunas automáticas com tamanhos mínimos diferentes -->
<div class="grid-auto-sm">  <!-- min 150px -->
<div class="grid-auto">     <!-- min 250px (padrão) -->
<div class="grid-auto-lg">  <!-- min 350px -->

<!-- Número fixo de colunas iguais -->
<div class="grid-cols-2">...</div>
<div class="grid-cols-3">...</div>
<div class="grid-cols-4">...</div>
<div class="grid-cols-5">...</div>
<div class="grid-cols-6">...</div>

Layouts especiais

Layouts pré-definidos para padrões comuns como sidebar e dashboard.

Sidebar + Conteúdo:

<div class="grid-sidebar">
  <aside>Sidebar (250px)</aside>
  <main>Conteúdo principal</main>
</div>

Header + Conteúdo:

<div class="grid-header-content">
  <header>Header fixo</header>
  <main>Conteúdo (ocupa espaço restante)</main>
</div>

Dashboard:

<div class="grid-dashboard">
  <aside class="grid-dashboard-sidebar">Menu</aside>
  <header class="grid-dashboard-header">Header</header>
  <main class="grid-dashboard-content">Conteúdo</main>
</div>

O layout dashboard colapsa em telas menores que 992px (lg), escondendo a sidebar e empilhando header + conteúdo.

Exemplos práticos

Casos de uso reais combinando os diferentes modos de grid.

Formulário com stepper (grid secundário):

<div class="container">
  <form>
    <div class="row-10 row-gap-lg">
      <div class="col-10 col-lg-5">
        <label class="form-label">Nome</label>
        <input type="text" class="form-control">
      </div>
      <div class="col-10 col-lg-5">
        <label class="form-label">Email</label>
        <input type="email" class="form-control">
      </div>
      <div class="col-10">
        <label class="form-label">Endereço</label>
        <input type="text" class="form-control">
      </div>
    </div>
  </form>
</div>

Portal de notícias (grid terciário):

<div class="container-news">
  <div class="row-6">
    <div class="col-6">
      <article class="card">Notícia destaque</article>
    </div>
  </div>
  <div class="row-6">
    <div class="col-2">
      <article class="card">Notícia 1</article>
    </div>
    <div class="col-2">
      <article class="card">Notícia 2</article>
    </div>
    <div class="col-2">
      <article class="card">Notícia 3</article>
    </div>
  </div>
</div>

Display responsivo

Classes utilitárias para esconder/mostrar elementos em breakpoints específicos.

Esconder em breakpoint:

Classe	Esconde em
.d-none-xs	< 576px
.d-none-sm	576px – 767px
.d-none-md	768px – 991px
.d-none-lg	992px – 1199px
.d-none-xl	>= 1200px

Mostrar apenas em breakpoint:

Classe	Visível em
.d-block-xs	< 576px
.d-block-sm	>= 576px
.d-block-md	>= 768px
.d-block-lg	>= 992px
.d-block-xl	>= 1200px

<!-- Esconder em mobile, mostrar no desktop -->
<div class="d-none-xs">Visível apenas em telas >= 576px</div>

<!-- Mostrar apenas em tablet+ -->
<div class="d-block-md">Visível apenas em telas >= 768px</div>

• Grid primário (12 colunas) -- home, listagens, inserir, visualizar
• Grid secundário (10 colunas) -- formulários com stepper
• Grid terciário (6 colunas) -- portal de notícias

Versão0.1.0

Última atualização13 mar 2026

Caminhosrc/foundation/grid.css