Grid

CSS Grid Layout

Recurso que permite construir layouts bidimensionais, dividindo a página em regiões e definindo onde cada elemento deve ficar.

Entendendo os conceitos do Grid Layout

Grid Layout é uma técnica de layout de dois eixos, oferecendo mais controle na distribuição dos elementos em linhas e colunas.

Nomenclaturas do Grid

Alguns termos importantes incluem grid container, grid item, grid line, grid cell, e grid area.

grid container

Elemento-pai que terá a propriedade display: grid especificada. Ele irá “envolver” todos os itens do grid.

grid item

Elementos que são filhos diretos do grid container.

grid columns

As faixas verticais dos itens do grid, são chamados de colunas (grid columns ).

grid rows

As faixas horizontais dos itens do grid, são chamados de linhas (grid rows ).

grid gaps

Espaços entre as linhas (grid rows ) e colunas ( grid columns ) do grid.

grid lines

Divisórias que compõem a estrutura da grade. As linhas entre as colunas são chamadas de column lines (linhas de coluna) e, as que estão entre as faixas horizontais, são chamadas de row lines (linhas de linha).

grid cell

São as células, ou seja, cada “quadrado” da grade, que vai entre uma grid line e outra.

Iniciando com o CSS Grid

Para usar o CSS Grid, basta aplicar display: grid no container desejado.

Item 1

Item 2

Item 3

Pode também adicionar display:inline-grid

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Adicionando colunas e linhas ao Grid

Usamos grid-template-columns e grid-template-rows para definir as faixas do grid.

Exemplo:

grid-template-columns: repeat(2, 1fr); /* Duas colunas de tamanhos iguais */

grid-template-rows: auto; /* Altura automática baseada no conteúdo */

Unidade de medida fr

Criada para o CSS Grid, a unidade de medida fr representa uma fração do espaço disponível no container do grid.

Função repeat()

Permite repetir para todas, ou para algumas das faixas, o mesmo valor para seu tamanho de coluna ou linha.

Outros valores para a função repeat: `auto-fill` e `auto-fit`

Ambas as funções são usadas com a propriedade grid-template-columns ou grid-template-rows para criar colunas ou linhas repetitivas de acordo com o espaço disponível. Elas ajudam a preencher o espaço disponível de forma inteligente, mas há uma diferença sutil entre elas:

auto-fill: Preenche o grid com o máximo de colunas (ou linhas) que caibam no espaço disponível, independentemente de haver conteúdo suficiente. Isso significa que, mesmo que alguns slots fiquem vazios, o grid continua tentando "preencher" o espaço. É útil quando você quer garantir que o layout preencha o espaço, mas não necessariamente todos os slots terão conteúdo.

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

auto-fit: Comporta-se de maneira similar ao auto-fill, mas "colapsa" as colunas ou linhas vazias, ajustando o layout para caber exatamente os itens disponíveis, sem criar colunas ou linhas vazias. é ideal quando você quer que os itens se ajustem exatamente ao conteúdo disponível, sem criar slots vazios.

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

Função minmax()

A função minmax(min, max) é usada para definir o tamanho mínimo e máximo das colunas ou linhas. Quando combinada com repeat() e auto-fill ou auto-fit, ela cria um layout flexível, permitindo que os itens do grid tenham um tamanho mínimo e se expandam até o tamanho máximo disponível.

Define um intervalo de valores para o tamanho das colunas ou linhas. O primeiro parâmetro define o tamanho mínimo, enquanto o segundo define o tamanho máximo. É muito útil para garantir que os elementos do grid tenham um tamanho mínimo para serem legíveis, mas que também se ajustem para ocupar o espaço extra, se houver.

Uso do `min-content`, `max-content` e `auto` no grid

min-content A menor largura possível do conteúdo, sem quebras ou transbordamento. max-content O maior tamanho que o conteúdo pode ter sem forçar quebras de linha. auto O navegador decide o tamanho automaticamente, baseado no conteúdo e no contêiner pai.

grid-template-columns: min-content max-content auto;

01 Trilha de CSS

05 Eloiza Souza

Grid implícito e explícito

Quando define-se as colunas e linhas através das propriedades grid-template-columns e grid-template-rows, estamos criando um grid explícito.

Mas, se os itens não couberem, o grid colocará um item fora desse grid que definimos, criando o que chamamos de grid implícito .

Propriedade `grid-auto-flow`

É usada para controlar como os itens são automaticamente posicionados no Grid Layout quando não são especificadas as posições exatas para eles. Ela define se os itens serão colocados em sequência por linha ou por coluna e também pode ser usada para preencher o espaço automaticamente. Seus valores podem ser:

row (padrão): Os itens são posicionados de forma automática seguindo a direção da linha, ou seja, eles são colocados da esquerda para a direita e, quando atingem o final da linha, começam uma nova linha.
column: Os itens são posicionados em colunas. Eles são colocados de cima para baixo e, ao atingir o final da coluna, começam uma nova coluna.
dense: Tenta preencher os espaços vazios dentro do grid, rearranjando os itens para ocupar todos os espaços livres.
row dense ou column dense: Combina a colocação de itens em linhas ou colunas com o preenchimento denso de espaços vazios.

As propriedades grid-auto-columns define a largura das colunas que forem criadas automaticamente.

Exemplo 1:

grid-template-columns: repeat(5, 1fr); grid-auto-flow: row;

Item 1

Item 2

Item 3

Item 4

Item 5

Exemplo 2:

grid-template-columns: repeat(5, 1fr); grid-auto-columns: 200px; grid-auto-flow: column;

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6 - Grid implícito

Alocando os itens do Grid nas posições específicas

Cada linha do grid possui um número para que possamos usar de referência (exceto para grids implícitos)

Utilize grid-column, grid-row e grid-areapara controlar o posicionamento de cada item no grid.

O valor a ser atribuído é o número correspondente à linha do grid. Caso coloque span nº indica quantas células naquela direção do grid o item irá ocupupar.

O grid-area pode ser utilizado para simplificar o código.

Exemplo 2:

grid-column-start: 2; grid-column-end: 5; grid-row: 1 / span 3; /* versão simplificada do grid- row */ /* grid-area: 1 / 2 / span 3 / 5; */

Item 1

Áreas do Grid

É possível nomear as áreas do grid e posicionar os itens dentro das áreas específicas, as referenciando através do nome.

grid-template-columns: 1fr 2fr; grid-template-rows:70px 70px 70px 70px; grid-template-areas: "header header" "menu content" "menu content" "footer footer";