CSS Grid é um sistema de layout bidimensional baseado em grade que permite criar layouts de sites organizados e flexíveis. Pense nisso como uma grade de colunas e linhas que você pode usar para posicionar e organizar elementos da página da web. No entanto, diferentemente das tabelas HTML, os layouts de grade CSS são controlados com CSS e não com marcação HTML. Isso torna o CSS Grid extremamente flexível para web design responsivo.
Como funciona a grade CSS em Blocs
Ao trabalhar com CSS Grid dentro Blocs, é importante considerar que o layout Grid é composto de dois elementos principais, um contêiner de grade pai e, na maioria dos casos, vários contêineres filhos internos.
Contêiner de grade pai
O contêiner da grade pai é responsável pelas principais informações do layout. Por exemplo, o número de colunas/linhas e suas respectivas dimensões de lacuna se aplicam a este elemento.
Contêiner Filho de Grade
Os contêineres filhos internos são as caixas nas quais você normalmente colocaria os elementos da interface do site. Por padrão, esses contêineres são definidos como fluxo automático (cabem na grade), no entanto, eles podem ser customizados usando classes customizadas para serem posicionados de diversas maneiras, dentro do contêiner da grade pai.
Você pode ler mais sobre como posicionar contêineres filhos SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
Adicionar um contêiner de grade
Você pode começar a usar CSS Grid em seu Blocs projeto adicionando um contêiner CSS Grid usando o dedicado Bric.
Ou alternativamente, selecionando um Div Bric e definindo seu tipo para o contêiner de grade.
O layout de grade CSS padrão em Blocs são duas colunas por duas linhas. Quando o layout é ajustado de alguma forma, por exemplo, adicionando colunas ou linhas adicionais, essas informações de layout personalizadas são armazenadas em uma classe personalizada que é aplicada automaticamente ao contêiner CSS Grid.
Também é importante notar que as colunas têm uma largura de 1fr e as linhas têm sua altura definida como auto por padrão.
colunas
Colunas são as divisões verticais do espaço no CSS Grid Layout, são particularmente úteis para guiar o olhar do visualizador, otimizar a legibilidade e utilizar o espaço de forma eficiente.
Adicionar uma coluna
Colunas adicionais podem ser adicionadas a um contêiner CSS Grid clicando no botão de adição + localizado no canto superior direito dos controles de seleção da grade.
Remover uma coluna
As colunas podem ser removidas de um contêiner CSS Grid clicando no botão de lixeira localizado no canto superior esquerdo de um controlador de largura de coluna.
Quando o número de colunas or linhas é personalizado, se não houver contêineres filhos suficientes para exibir corretamente o layout, Blocs irá inseri-los automaticamente no contêiner CSS Grid.
Também é importante lembrar que CSS Grid usa CSS puro para controlar o layout, o que significa que colunas podem ser adicionadas e removidas por ponto de interrupção.
Largura da coluna
Por padrão, a largura de uma coluna é definida como 1fr em contêineres CSS Grid dentro Blocs. O fr unidade significa fração. Representa uma fração do espaço disponível no contêiner da grade.
Quando usado para largura de coluna, 1fr significa que a coluna ocupará uma fração do espaço total disponível. Se várias colunas usarem o fr unidade, o espaço é dividido de acordo com o valor da fração de cada coluna em relação à soma dos valores das frações de todas as colunas.
A largura de uma coluna pode ser ajustada por ponto de interrupção usando a alça de redimensionamento encontrada no controle de largura da coluna. Arrastando esta alça esquerda or certo irá ajustar o fr valor para a coluna relacionada em incrementos de 0.5.
Espaço da Coluna
Você pode definir o espaçamento entre colunas em cada ponto de interrupção arrastando o espaço vazio entre as colunas dentro do contêiner de grade na tela de design.
Você também pode redefinir a medição da lacuna da coluna de um contêiner CSS Grid clique direito no espaço entre as colunas e selecionando Redefinir largura.
Linhas
As linhas são as divisões horizontais do espaço no layout CSS Grid, garantem que o conteúdo flua de forma lógica e mantenham o alinhamento visual.
Adicionar uma linha
Linhas adicionais podem ser adicionadas a um contêiner CSS Grid clicando no botão de adição + localizado no canto inferior esquerdo dos controles de seleção de grade.
As linhas funcionam de maneira um pouco diferente das colunas, embora você possa adicionar mais linhas. Normalmente, o número de linhas é calculado e ajustado automaticamente com base no número de colunas e contêineres filhos no contêiner da grade pai.
Remover uma linha
O processo de remoção de linhas é um pouco diferente do processo de remoção de colunas. Só é possível remover linhas quando há um número negativo de contêineres filhos para o número de linhas no layout da grade.
Quando a contagem de contêineres filhos for negativa para uma linha, um botão de lixeira será exibido na borda superior do controle de altura da linha (que não contém nenhum contêiner filho). Clicar neste botão removerá a linha.
Altura da linha
A altura padrão de uma linha é definida como auto em contêineres CSS Grid dentro Blocs. O auto unit essencialmente diz à grade para determinar automaticamente a altura daquela linha com base em seu conteúdo. Em outras palavras, a linha terá a mesma altura do conteúdo mais alto dentro dos contêineres filhos da grade dessa linha.
A altura de uma coluna pode ser ajustada por ponto de interrupção usando a alça de redimensionamento encontrada no controle de altura da linha. Arrastando esta alça up or down ajustará a altura da linha em pixels.
Embora esta opção esteja disponível, é recomendado usar auto para alturas de linha, pois é mais flexível no que diz respeito à capacidade de resposta do layout.
Espaço entre linhas
Você pode definir o espaçamento entre linhas em cada ponto de interrupção arrastando o espaço vazio entre as linhas dentro do contêiner CSS Grid na tela de design.
Você também pode redefinir a medição de lacuna de linha de um contêiner CSS Grid clique direito no espaço entre as colunas e selecionando Redefinir altura.
Posicionando contêineres filhos
Por padrão, esses contêineres são definidos como fluxo automático (cabem na grade), no entanto, eles podem ser customizados de forma independente usando classes customizadas, para serem posicionados dentro do contêiner da grade pai.
Para personalizar como um contêiner filho da grade é posicionado na grade, você deve primeiro selecioná-lo e aplicar uma classe personalizada.
Com o Editor de aula, agora é possível aplicar valores ao Item de grade regras para o contêiner filho selecionado para posicioná-lo em seu respectivo contêiner pai CSS Grid.
Início da coluna
A início da coluna da grade propriedade é usada para indicar a linha de grade da coluna onde um item de grade começa em um layout de grade.
Fim da coluna
A final da coluna da grade A propriedade é usada para indicar quantas colunas um item abrangerá ou a linha de grade da coluna onde um item de grade termina em um layout de grade.
Início da linha
A início da linha da grade propriedade é usada para indicar a linha de grade da linha onde um item de grade começa em um layout de grade.
Fim da linha
A final da linha da grade propriedade é usada para indicar quantas linhas um item abrangerá ou a linha da linha onde um item de grade termina em um layout de grade.
Técnicas de Posicionamento
Usando as propriedades início da coluna, fim da coluna, início da linha e fim da linha, é possível posicionar contêineres filhos dentro do contêiner pai da grade CSS. Aqui estão alguns exemplos comuns de técnicas de posicionamento filho de grade.
Todos os exemplos aqui podem ser examinados mais detalhadamente neste Blocs projeto de amostra.
Colunas de extensão
Para abranger um contêiner filho da grade em várias colunas, aplique uma classe ao contêiner filho e defina o valor Itens de grade > Coluna > Fim valor do campo para palmo seguido pelo número de colunas pelas quais você gostaria de abranger o filho.
Ampliar linhas
Para abranger um contêiner filho da grade por várias linhas, aplique uma classe ao contêiner filho e defina o valor Itens de grade > Linha > Fim valor do campo para palmo seguido pelo número de linhas que você gostaria de abranger o filho.
Alterar posição horizontal
Neste exemplo, o contêiner filho roxo está originalmente na primeira posição horizontal na grade, usando uma classe personalizada ele é movido diretamente para a segunda posição horizontal ou segunda coluna.
Para posicionar um contêiner filho da grade horizontalmente, aplique uma classe ao contêiner filho e defina o valor Itens de grade > Coluna > Iniciar valor do campo para o número da coluna em que você gostaria de posicioná-lo. Também é importante definir o Itens de grade > Linha > Iniciar valor do campo para o número da linha em que você deseja que ele permaneça.
Alterar posição vertical
Neste exemplo, o contêiner filho roxo está originalmente na primeira posição vertical na grade, usando uma classe personalizada ele é movido para a segunda posição vertical.
Para posicionar um contêiner filho da grade verticalmente, aplique uma classe ao contêiner filho e defina o valor Itens de grade > Linha > Iniciar valor do campo para o número da linha em que você gostaria de posicioná-lo.
Ao posicionar contêineres filhos da grade, é importante considerar que outros contêineres filhos na grade podem ter regras de posicionamento de classe conflitantes aplicadas, o que pode criar erros de layout indesejados. Tome cuidado para manter suas classes de grade organizadas para evitar confusão ao construir com CSS Grid.
Leitura
Este artigo é destinado a iniciantes que estão dando os primeiros passos com CSS Grid, se você estiver procurando informações mais aprofundadas e avançadas sobre CSS Grid, recomendamos a leitura deste guia introdutório sobre Grade CSS de Truques CSS.