Grade CSS

O sistema de grade padrão do Bootstrap representa o culminar de mais de uma década de técnicas de layout CSS, experimentadas e testadas por milhões de pessoas. Mas também foi criado sem muitos dos recursos e técnicas modernas de CSS que estamos vendo em navegadores como o novo CSS Grid.

Como funciona

Com o Bootstrap 5, adicionamos a opção de habilitar um sistema de grade separado que é construído em CSS Grid, mas com um toque de Bootstrap. Você ainda recebe aulas que pode aplicar por capricho para criar layouts responsivos, mas com uma abordagem diferente sob o capô.

• CSS Grid é opcional. Desabilite o sistema de grade padrão configurando $enable-grid-classes: falsee habilite CSS Grid configurando $enable-cssgrid: true. Em seguida, recompile seu Sass.

• Substitua instâncias de .rowpor .grid. A .gridclasse define display: gride cria um grid-templateque você constrói com seu HTML.

• Substitua .col-*classes por .g-col-*classes. Isso ocorre porque nossas colunas CSS Grid usam a grid-columnpropriedade em vez de width.

• Colunas e tamanhos de medianiz são definidos por meio de variáveis ​​CSS. Defina-os no pai .gride personalize como quiser, embutido ou em uma folha de estilo, com --bs-columnse --bs-gap.

No futuro, o Bootstrap provavelmente mudará para uma solução híbrida, pois a gappropriedade alcançou suporte quase completo ao navegador para flexbox.

Principais diferenças

Comparado com o sistema de grade padrão:

• Os utilitários Flex não afetam as colunas CSS Grid da mesma maneira.

• As lacunas substituem as calhas. A gappropriedade substitui a horizontal paddingdo nosso sistema de grade padrão e funciona mais como margin.

• Como tal, ao contrário .rowde s, .grids não tem margens negativas e os utilitários de margem não podem ser usados ​​para alterar as calhas da grade. As lacunas de grade são aplicadas horizontalmente e verticalmente por padrão. Consulte a seção de personalização para obter mais detalhes.

• Estilos embutidos e personalizados devem ser vistos como substitutos para classes modificadoras (por exemplo, style="--bs-columns: 3;"vs class="row-cols-3").

• O aninhamento funciona de maneira semelhante, mas pode exigir que você redefina suas contagens de colunas em cada instância de um arquivo .grid. Consulte a seção de aninhamento para obter detalhes.

Exemplos

Três colunas

Três colunas de largura igual em todas as viewports e dispositivos podem ser criadas usando as .g-col-4classes. Adicione classes responsivas para alterar o layout por tamanho da janela de visualização.

<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Responsivo

Use classes responsivas para ajustar seu layout nas janelas de visualização. Aqui começamos com duas colunas nas viewports mais estreitas e, em seguida, crescemos para três colunas nas viewports médias e acima.

<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

Compare isso com este layout de duas colunas em todas as viewports.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Invólucro

Os itens de grade são agrupados automaticamente na próxima linha quando não há mais espaço horizontalmente. Observe que gapse aplica a intervalos horizontais e verticais entre itens de grade.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Inicia

As classes de início visam substituir as classes de deslocamento da nossa grade padrão, mas elas não são totalmente iguais. CSS Grid cria um modelo de grade por meio de estilos que informam aos navegadores para “começar nesta coluna” e “terminar nesta coluna”. Essas propriedades são grid-column-starte grid-column-end. As classes iniciais são uma abreviação para as primeiras. Emparelhe-os com as classes de coluna para dimensionar e alinhar suas colunas da maneira que você precisar. As classes iniciais começam em 1como 0é um valor inválido para essas propriedades.

<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

Colunas automáticas

Quando não há classes nos itens da grade (os filhos imediatos de a .grid), cada item da grade será automaticamente dimensionado para uma coluna.

<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Esse comportamento pode ser misturado com classes de coluna de grade.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Aninhamento

Semelhante ao nosso sistema de grade padrão, nosso CSS Grid permite um fácil aninhamento de .grids. No entanto, ao contrário do padrão, essa grade herda as alterações nas linhas, colunas e lacunas. Considere o exemplo abaixo:

• Substituímos o número padrão de colunas por uma variável CSS local: --bs-columns: 3.
• Na primeira coluna automática, a contagem de colunas é herdada e cada coluna tem um terço da largura disponível.
• Na segunda coluna automática, redefinimos a contagem de colunas no aninhado .gridpara 12 (nosso padrão).
• A terceira coluna automática não tem conteúdo aninhado.

Na prática, isso permite layouts mais complexos e personalizados quando comparado ao nosso sistema de grade padrão.

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

Personalização

Personalize o número de colunas, o número de linhas e a largura das lacunas com variáveis ​​CSS locais.

Essas variáveis ​​CSS não têm valor padrão; em vez disso, eles aplicam valores de fallback que são usados ​​até que uma instância local seja fornecida. Por exemplo, usamos var(--bs-rows, 1)para nossas linhas CSS Grid, que ignora --bs-rowsporque isso ainda não foi definido em nenhum lugar. Quando estiver, a .gridinstância usará esse valor em vez do valor de fallback de 1.

Sem aulas de grade

Os elementos filhos imediatos de .gridsão itens de grade, portanto, eles serão dimensionados sem adicionar explicitamente uma .g-colclasse.

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Colunas e lacunas

Ajuste o número de colunas e o intervalo.

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Adicionando linhas

Adicionando mais linhas e alterando o posicionamento das colunas:

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

Lacunas

Altere as lacunas verticais apenas modificando o arquivo row-gap. Observe que usamos gapon .grids, mas row-gape column-gappode ser modificado conforme necessário.

<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Por isso, você pode ter s verticais e horizontais diferentes gap, que podem assumir um único valor (todos os lados) ou um par de valores (vertical e horizontal). Isso pode ser aplicado com um estilo embutido para gap, ou com nossa --bs-gapvariável CSS.

<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Sass

Uma limitação do CSS Grid é que nossas classes padrão ainda são geradas por duas variáveis ​​Sass $grid-columnse $grid-gutter-width. Isso efetivamente predetermina o número de classes geradas em nosso CSS compilado. Você tem duas opções aqui:

• Modifique essas variáveis ​​Sass padrão e recompile seu CSS.
• Use estilos embutidos ou personalizados para aumentar as classes fornecidas.

Por exemplo, você pode aumentar a contagem de colunas e alterar o tamanho da lacuna e, em seguida, dimensionar suas “colunas” com uma mistura de estilos embutidos e classes de coluna CSS Grid predefinidas (por exemplo, .g-col-4).

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>