Grade CSS
Saiba como habilitar, usar e personalizar nosso sistema de layout alternativo construído em CSS Grid com exemplos e trechos de código.
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: false
e habilite CSS Grid configurando$enable-cssgrid: true
. Em seguida, recompile seu Sass. -
Substitua instâncias de
.row
por.grid
. A.grid
classe definedisplay: grid
e cria umgrid-template
que você constrói com seu HTML. -
Substitua
.col-*
classes por.g-col-*
classes. Isso ocorre porque nossas colunas CSS Grid usam agrid-column
propriedade em vez dewidth
. -
Colunas e tamanhos de medianiz são definidos por meio de variáveis CSS. Defina-os no pai
.grid
e personalize como quiser, embutido ou em uma folha de estilo, com--bs-columns
e--bs-gap
.
No futuro, o Bootstrap provavelmente mudará para uma solução híbrida, pois a gap
propriedade 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
gap
propriedade substitui a horizontalpadding
do nosso sistema de grade padrão e funciona mais comomargin
. -
Como tal, ao contrário
.row
de s,.grid
s 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;"
vsclass="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-4
classes. Adicione classes responsivas para alterar o layout por tamanho da janela de visualização.
<div class="grid">
<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">
<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">
<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 gap
se aplica a intervalos horizontais e verticais entre itens de grade.
<div class="grid">
<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-start
e 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 1
como 0
é um valor inválido para essas propriedades.
<div class="grid">
<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">
<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">
<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 .grid
s. 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
.grid
para 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" 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.
Variável | Valor de reserva | Descrição |
---|---|---|
--bs-rows |
1 |
O número de linhas em seu modelo de grade |
--bs-columns |
12 |
O número de colunas em seu modelo de grade |
--bs-gap |
1.5rem |
O tamanho do espaço entre as colunas (vertical e horizontal) |
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-rows
porque isso ainda não foi definido em nenhum lugar. Quando estiver, a .grid
instância usará esse valor em vez do valor de fallback de 1
.
Sem aulas de grade
Os elementos filhos imediatos de .grid
são itens de grade, portanto, eles serão dimensionados sem adicionar explicitamente uma .g-col
classe.
<div class="grid" 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" 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" 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" 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 gap
on .grid
s, mas row-gap
e column-gap
pode ser modificado conforme necessário.
<div class="grid" 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-gap
variável CSS.
<div class="grid" 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-columns
e $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" 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>