Aprenda como usar grades CSS para criar layouts complexos com facilidade.

Posicionar elementos em uma página web pode ser muito complicado quando se trabalha com layouts complexos. É aqui que a grade CSS se torna útil. É um sistema de layout projetado para simplificar o processo de criação de layouts complexos.

Como isso ajuda você? Ao contrário dos métodos de layout tradicionais que permitem apenas posicionar elementos em linhas ou colunas, a grade CSS oferece o melhor dos dois mundos: uma abordagem 2D usando linhas e colunas.

Contêineres e itens de grade

Você pode aplicar propriedades de grade CSS a dois tipos principais de elementos: pai e filho. Quando você define a propriedade display como "grid" para um elemento pai, ele transforma esse elemento em um contêiner de grade. Qualquer elemento filho dentro deste contêiner de grade se torna um item de grade, herdando as propriedades da grade aplicadas.

Veja como ele é representado:

Um item de grade também pode se tornar um contêiner de grade. Agora você pode se referir ao layout como uma grade aninhada – uma grade dentro de uma grade. O contêiner de grade principal agora é chamado de grade externa, enquanto o contêiner de item transformado em grade se torna uma grade interna.

instagram viewer

Cada uma dessas grades opera independentemente da outra, o que significa que as propriedades definidas para uma grade interna não afetam o layout da grade externa e vice-versa.

Aqui está o que parece:

Dominar o relacionamento entre contêineres de grade e itens é essencial para construindo layouts bidimensionais efetivamente.

Lembre-se de que existem propriedades de grade para contêineres de grade, enquanto outras são para itens de grade.

Linhas de grade e trilhas

Antes de começar a usar a grade CSS, existem dois termos principais com os quais você deve estar familiarizado:

  1. Linhas de grade: as linhas de grade referem-se às linhas horizontais e verticais que formam a grade em um layout de grade CSS. Eles especificam os pontos inicial e final de linhas e colunas, ajudando a organizar onde as coisas vão na grade. Essas linhas são como bordas de caixas; eles possuem números que ajudam a referenciar os elementos no posicionamento. Aqui a linha tracejada vermelha os representa:
  2. Trilhas de grade: são os espaços entre as linhas de grade que definem linhas e colunas. Eles são como os blocos de construção do layout da grade. Na imagem acima, a área colorida dentro de cada item representa a trilha da grade.

Pense nas linhas e trilhas da grade como os blocos de construção de um layout de grade, como as linhas em uma folha de papel milimetrado. Quando uma linha de grade horizontal cruza com uma linha de grade vertical, ela forma uma célula em forma de caixa. Essas células atuam como contêineres onde você pode colocar os itens da grade.

Propriedades do contêiner de grade CSS

Estas são propriedades que você pode aplicar ao contêiner da grade para organizar o layout e auxiliar no posicionamento dos elementos dentro dele. Conforme mencionado anteriormente, uma delas é a propriedade display definida como grid. Aqui estão mais:

Modelo de grade

Esta propriedade define o tamanho das linhas e colunas. Você pode dimensionar essas propriedades usando pixels, porcentagens ou a unidade fracionária (fr). Além disso, você pode usar palavras-chave como auto, mínimo máximo(), e repita() para aumentar a flexibilidade.

  • linhas de modelo de grade: Define as alturas das linhas.
  • colunas de modelo de grade: Define as larguras das colunas.

aqui estão alguns exemplos:

Usando Pixels:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Usando porcentagens:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Usando fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Usando palavras-chave auto e minmax():

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Usando repeat() para dimensionamento consistente:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Posicionamento automático e áreas de modelo de grade

Posicionamento automático: o posicionamento automático é como deixar a grade decidir onde colocar os itens. Se você não especificar as posições exatas, a grade colocará automaticamente os itens na ordem em que aparecem na marcação. Isso é útil quando você tem muitos itens e deseja que eles preencham a grade uniformemente.

Áreas de modelo de grade: pense nas áreas do modelo de grade como a criação de um layout usando zonas nomeadas. É como nomear salas em uma planta baixa. Você pode consultar esses nomes de área ao posicionar itens de grade. Por exemplo:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Este layout é como uma grade com três colunas e quatro linhas. Existem duas linhas para a área de conteúdo principal. As áreas rotuladas incluem “cabeçalho”, “barra lateral”, “conteúdo” e “rodapé”. Nas próximas seções, você aprenderá como usar esses rótulos de área nas propriedades de cada item da grade.

Alinhamento em grade CSS

Você pode usar propriedades de alinhamento para controlar o posicionamento dos itens da grade dentro das células da grade. As propriedades são:

  • justificar itens: controla o alinhamento horizontal dos itens dentro da célula da grade.
    • Valores: início, fim, centro e alongamento.
  • alinhar itens: controla o alinhamento vertical dos itens dentro da célula da grade.
    • Valores: início, fim, centro e alongamento.
  • justificar-conteúdo: alinha toda a grade dentro do contêiner ao longo do eixo horizontal.
    • Valores: iniciar, terminar, centralizar, esticar, espaço entre, espaço ao redor e espaço uniforme.
  • alinhar conteúdo: alinha toda a grade dentro do contêiner ao longo do eixo vertical.
    • Valores: iniciar, terminar, centralizar, esticar, espaço entre, espaço ao redor e espaço uniforme.

Aqui está um exemplo:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

Neste exemplo, os itens serão centralizados horizontal e verticalmente em suas células. O espaço será distribuído uniformemente entre as colunas de toda a grade, e a grade será centralizada verticalmente no contêiner.

Lacuna da grade

A lacuna da grade refere-se ao espaço entre linhas e colunas em um layout de grade. Ajuda a criar separação visual e adiciona espaço entre os itens da grade.

O lacuna na rede propriedade permite definir o intervalo entre linhas e colunas. Você pode usar várias unidades para defini-lo, como pixels (px), porcentagens (%), unidades em (em) e muito mais.

.grid-container {
grid-gap: 20px;
}

Neste exemplo, o contêiner da grade possui duas colunas com um intervalo de 20 pixels entre elas. Esse espaçamento separa visualmente as colunas e aprimora o layout.

Propriedades do item de grade CSS

Aqui estão algumas propriedades principais que controlam o comportamento de itens de grade individuais dentro de um layout de grade CSS, juntamente com exemplos:

grid-row-start e grid-row-end:

  • Define as linhas de linha inicial e final de um item.
  • Os valores podem ser números de linha, "span n" ou "auto". 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Este código coloca Item de grade 1 da linha da segunda linha para a linha da quarta linha.

início da coluna da grade e fim da coluna da grade:

  • Define as linhas de coluna inicial e final de um item.
  • Os valores podem ser números de linha, "span n" ou "auto". 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Este código coloca Item de grade 2 da primeira linha da coluna até a terceira linha da coluna.

área de grade:

  • Especifica o tamanho e a posição de um item de grade dentro da grade referenciando as linhas de grade nomeadas em áreas de modelo de grade.
  • Como mencionado anteriormente, nomes de áreas predefinidos já estão em uso com o áreas de modelo de grade propriedade. Aqui está um exemplo de como usá-lo junto com área de grade. 
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Aqui está o resultado:

justificar-se:

  • Alinha itens individuais horizontalmente dentro de sua célula.
  • Os valores podem ser início, fim, centro e extensão. 
.grid-item-5 {
justify-self: center;
}

Este código centraliza horizontalmente o Item de grade 5 dentro de sua célula.

alinhar-se:

  • Alinhe itens individuais verticalmente dentro de sua célula.
  • Os valores podem ser início, fim, centro e extensão. 
.grid-item-1 {
align-self: end;
}

Este código se alinha Item de grade 1 para o fundo de sua célula.

Sinta-se à vontade para combinar e personalizar essas propriedades para criar o layout e a aparência desejada para cada item de grade em sua grade CSS.

Criação de layouts responsivos usando grades CSS

Usando grades CSS para criando layouts responsivos é importante garantir que sua página da web se adapte perfeitamente a vários tamanhos de tela e dispositivos. Você pode aplicar estes métodos:

  • Consultas de mídia: Você pode usar consultas de mídia para aplicar diferentes layouts de grade dependendo do tamanho da tela. Por exemplo, pode ser necessário reorganizar os itens da grade ou ajustar as larguras das colunas para telas menores.
  • Unidades Flexíveis: use unidades relativas, como porcentagens e fr, para permitir que itens e colunas da grade se ajustem proporcionalmente ao espaço disponível.
  • mínimo máximo(): Use o mínimo máximo() função para especificar um intervalo de tamanhos para colunas ou linhas da grade. Ele garante que os itens não aparecerão muito pequenos ou muito grandes em telas diferentes.

Lembre-se de ajustar colunas e outros elementos, como espaços entre itens da grade, tamanhos de fonte e margens. Ele garante um layout consistente e bem projetado que funciona bem em vários dispositivos.

Explore as possibilidades do layout de grade CSS

Adotar a flexibilidade e o poder da grade CSS permitirá que você crie layouts que não apenas tenham uma ótima aparência, mas também se adaptem perfeitamente às demandas do web design moderno. Então, mergulhe no mundo das grades, explore as possibilidades e aprimore suas habilidades de desenvolvimento web.

À medida que você se aprofunda nos sistemas de layout, você pode querer comparar outros métodos de layout com grades CSS. Você pode fazer isso com o módulo CSS Flexbox. Isso o ajudará a aprender a decidir ao trabalhar em um projeto.