Moda layouts flexíveis com grade CSS

Sep 16, 2025

Como

A woman sits at a laptop tweaking a CSS Grid layout

O CSS Grid é perfeito para criar layouts de dois eixos de linhas e colunas. A sintaxe é simples e torna a layout de página uma brisa. Os layouts que teriam necessários vários recipientes aninhados agora podem ser descritos simplesmente no CSS.

A Grid funciona de maneira diferente para outras propriedades de layout, desde que a aplicação do valor "grade" à propriedade 'Display' afetará quaisquer crianças diretas. Esses elementos agora são itens de grade e serão posicionados de acordo com as regras que você definiu no pai (a menos que seja especialmente colocado).

Chegar a apertos com a grade

Grade traz um número de novos recursos:

Gap

Em vez de usar margens, a Grid tem sua própria propriedade para definir lacunas entre itens de grade, permitindo que o layout da grade seja definido e não afetado por nenhuma lacuna. Os sistemas de grade (como aqueles encontrados em Inuit e Twitter Bootstrap) geralmente dependem de definir margens negativas para alinhar tudo corretamente.

A unidade fr

Curto para fração, esta nova unidade de medição é usada para dividir o layout em frações, com ou sem uma lacuna.

Colocação de grade

O CSS Grid permite que qualquer elemento seja priorizado e posicionado em qualquer lugar na grade antes de todos os outros itens, que são posicionados automaticamente.

Áreas de grade e modelos

As áreas nomeadas na grade são definidas, que podem ser referenciadas para definir o layout em uma moda quase ascii.

mínimo máximo()

O valor da propriedade 'MinMax ()' permite aplicar um tamanho mínimo e máximo para itens de grade, colunas e linhas. Esse recurso é infelizmente ausente da Flexbox e em todos os outros módulos de layout no CSS.

Construa suas grades

As áreas poderosas e modelos de CSS Grid permitem que layouts complicados sejam facilmente alcançados. Você começa aplicando um nome aos elementos dentro da sua grade usando a propriedade 'área da grade' - por exemplo, cabeçalho {grid-area: cabeçalho; } '. Depois de ter nomeado todas as áreas em sua grade, você pode usar a propriedade 'Grid-Template-áreas' para descrever o layout.

 Áreas de modelo de grade:
  "Cabeçalho de cabeçalho de cabeçalho"
  "Artigo da barra esquerda direita do artigo"
  "Rodapé rodapé"
;

O exemplo de código acima descreve uma grade de três por três, basta repetir o nome do item da grade se quiser que ele abranja várias colunas ou linhas. Você também pode usar consultas de mídia para alterar o layout de grade para telas diferentes.

Você pode então usar a nova unidade 'FR' para definir como a largura é dividida entre as diferentes colunas:

 Colunas de modelo de grade: 1fr 3fr 1fr;

O exemplo mostrado acima irá dividir a largura disponível em cinco valores de largura igual; Em outras palavras, aplicará um quinto à primeira coluna, três quintos à segunda coluna e a quinta final para a coluna final.

Para dimensionar as linhas, você pode usar o novo valor de propriedade 'MinMax' para dimensionar as colunas superior e inferior em seu conteúdo e, em seguida, permitir que a linha do meio abra o espaço restante na grade.

 Linhas de Grade-Template:
  MINMAX (índice min, conteúdo máximo)
  auto
MinMax (conteúdo min, conteúdo máximo);

Este artigo foi originalmente publicado em Edição 271 da revista Creative Web Design Web Designer. Comprar Edição 271. ou Inscreva-se no Web Designer .

Quer fortalecer suas habilidades de grade CSS?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018 — O Brenda Storer está dando a sua conversa usando o CSS Grid no mundo real em gerar Nova York de 25 - 27 de abril de 2018

Como desenvolvedor de designer e front-end em uma agência de desenvolvimento de software, a Brenda Storer tem usado a rede CSS em produção para sites desde a sua liberação inicial para navegadores em março de 2017 e é um grande fã.

Em sua conversa em Gere Nova York de 25-27 de abril de 2018 , Brenda vai mostrar passo a passo como você pode aprimorar progressivamente o seu site com a grade CSS e escrever um fallback à prova de balas para navegadores mais antigos (ou mesmo continuar usando sua estrutura de grade atual como um fallback), tudo com CSS puro: nenhum javascript necessário .

Gerar Nova York ocorre de 25 a 27 de abril de 2018. Obtenha seu ingresso agora .

Artigos relacionados:

Segredos de layout de grade CSS revelados
Crie um layout responsivo com grade CSS
Levante-se com a velocidade com a grade CSS

Moda layouts flexíveis com grade CSS

Chegar a apertos com a grade

Construa suas grades

Quer fortalecer suas habilidades de grade CSS?

Como - Artigos mais populares

O que é uma linha de terminador?

Jump Start reagir nativo com a Expo

Domine a ciência da otimização da taxa de conversão

Como misturar uma paleta de guache

Como se mover entre Daz Studio e Zbrush

Comece no Lumberyard da Amazon: Configurando

O guia Pro para criar texturas 3D

Boost D3.js gráficos com gradientes SVG

Categorias