Sistema de grid

O elemento wrapper recebe a classe .grid. Os itens usam .col-{n} para especificar quantas colunas ocupam. Por padrão o grid tem 12 colunas.

Para personalizar o número de colunas globalmente, passe $grid-columns no seu style.scss:

@use 'config' as * with (
  $grid-columns: 18
);

Para ajustar o número de colunas no nível de um componente, use as classes .grid-col-{n}:

<div class="grid grid-col-5">
  <!-- grid com 5 colunas -->
</div>

Sem .col-{n}, o item ocupa toda a largura do grid.

<ul class="grid gap-xs">
  <!-- 12 × col-1 -->
  <li class="col-1"></li>
  ...
  <!-- 6 × col-2 -->
  <li class="col-2"></li>
  ...
  <!-- 4 × col-3 -->
  <li class="col-3"></li>
  ...
  <!-- 2 × col-6 -->
  <li class="col-6"></li>
  ...
  <!-- sem classe = largura total -->
  <li></li>
</ul>

Tipos de coluna

.col — item expansível

Garante que todos os itens da mesma linha tenham larguras iguais. Também é útil para um item ocupar todo o espaço restante da linha.

<ul class="grid gap-xs">
  <li class="col"></li>
  <li class="col"></li>
  <li class="col"></li>
</ul>

<ul class="grid gap-xs margin-top-xs">
  <li class="col-2"></li>
  <li class="col-2"></li>
  <li class="col"></li>
</ul>

.col-content — largura pelo conteúdo

A largura do item é determinada pelo seu conteúdo em vez de um número fixo de colunas.

<div class="grid gap-xs">
  <input class="form-control col" type="text">
  <button class="btn btn--primary col-content">Enviar</button>
</div>

Modificadores responsivos

Use .col-{n}@{breakpoint}, .col@{breakpoint} e .col-content@{breakpoint} para modificar o número de colunas de um item em um breakpoint específico:

<ul class="grid gap-sm">
  <li class="col-6@md col-3@lg"></li>
  <li class="col-3@md"></li>
  <!-- ... -->
</ul>

Gap

As classes .gap-{size} definem o gap do grid. O gap padrão é zero. Veja a referência completa em Utilitários → Gap.

Para mirar apenas o gap vertical (entre linhas):

<ul class="grid gap-y-md">
  <!-- ... -->
</ul>

Para apenas o gap horizontal (entre colunas):

<ul class="grid gap-x-sm">
  <!-- ... -->
</ul>

Variações responsivas:

<ul class="grid gap-sm gap-md@md gap-y-xl@lg">
  <!-- ... -->
</ul>

Para valores fora da escala, use as custom properties --column-gap e --row-gap via atributo style:

<ul class="grid" style="--column-gap: 4px;">
  <!-- ... -->
</ul>

Offset

Use .offset-{n} para empurrar um item à direita. Adicione @{breakpoint} para aplicar o offset em um breakpoint específico, ou use .offset-0@{breakpoint} para zerar o offset.

<ul class="grid gap-sm">
  <li class="col-1 offset-11"></li>
  <li class="col-2 offset-10"></li>
  <li class="col-3 offset-9"></li>
  <li class="col-4 offset-8"></li>
  <li class="col-5 offset-7"></li>
  ...
</ul>

Exemplos

Aninhamento

Grids podem ser aninhados: um .grid dentro de um .col cria um sub-grid independente.

<ul class="grid gap-sm">
  <li class="col-12 col-6@md">
    <ul class="grid gap-sm">
      <li class="col">
        <ul class="grid gap-sm">
          <li class="col"></li>
          <li class="col"></li>
        </ul>
      </li>
      <li class="col">
        <ul class="grid gap-sm">
          <li class="col"></li>
          <li class="col"></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="col-12 col-6@md">
    <ul class="grid gap-sm">
      <li class="col">
        <ul class="grid gap-sm">
          <li class="col"></li>
          <li class="col"></li>
        </ul>
      </li>
      <li class="col">
        <ul class="grid gap-sm">
          <li class="col"></li>
          <li class="col"></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Distribuição

O .grid é um flex container — use as classes flexbox para controlar a distribuição:

<ul class="grid justify-between">
  <li class="col-2"></li>
  <li class="col-6"></li>
</ul>

<ul class="grid justify-center">
  <li class="col-6"></li>
</ul>

Ordem reversa

Inverta a ordem de colunas em um breakpoint usando flex-row-reverse ou order:

<!-- usando flex-row-reverse -->
<ul class="grid gap-xs flex-row-reverse@md">
  <li class="col-4@md">1</li>
  <li class="col-8@md">2</li>
</ul>

<!-- usando order -->
<ul class="grid gap-xs margin-top-xs">
  <li class="col-6 order-2">1</li>
  <li class="col-6 order-1">2</li>
</ul>

Quebra de colunas

Para quebrar colunas em linhas diferentes, aninha grupos de itens dentro de um <li> sem classe de coluna (ocupa toda a largura):

<ul class="grid gap-md">
  <li>
    <ul class="grid gap-md">
      <li class="col-3 height-xl bg-primary bg-opacity-60% radius-md"></li>
      <li class="col-3 height-xl bg-primary bg-opacity-70% radius-md"></li>
    </ul>
  </li>
  <li>
    <ul class="grid gap-md justify-end">
      <li class="col-3 height-xl bg-primary bg-opacity-80% radius-md"></li>
      <li class="col-3 height-xl bg-primary bg-opacity-90% radius-md"></li>
      <li class="col-3 height-xl bg-primary radius-md"></li>
    </ul>
  </li>
</ul>