Um guia para grade CSS: dominando layouts com propriedades de grade
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.
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 a construção eficaz de layouts bidimensionais.
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:
- 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:
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, minmax() e repeat() para aumentar a flexibilidade.
- grid-template-rows: Define a altura das linhas.
- grid-template-columns: 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: auto minmax(150px, 1fr) auto;
grid-template-rows: 100px auto;
}
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 de 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:'header header header header'
'sidebar main main right'
'sidebar content content right'
'footer footer footer footer';
}
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:
justify-items: Controla o alinhamento horizontal dos itens dentro da célula da grade.
- Valores: início, fim, centro e alongamento.
align-items: controla o alinhamento vertical dos itens dentro da célula da grade.
- Valores: início, fim, centro e alongamento.
justify-content: Alinha toda a grade dentro do contêiner ao longo do eixo horizontal.
- Valores: início, fim, centro, extensão, espaço entre, espaço ao redor e espaço uniforme.
align-content: alinha toda a grade dentro do contêiner ao longo do eixo vertical.
- Valores: início, fim, centro, extensão, 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.
A propriedade grid-gap 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:
início da linha da grade e fim da linha da grade:
- 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 o 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 o Item de grade 2 da primeira linha da coluna para 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 grid-template-areas.
- Conforme mencionado anteriormente, nomes de áreas predefinidos já estão em uso com a propriedade grid-template-areas. Aqui está um exemplo de como usá-lo junto com grid-area.
.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 5 da grade 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 alinha o Item 1 da grade na parte inferior 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
Usar grades CSS para criar layouts responsivos é importante para 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.
- minmax(): Use a função minmax() 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.