display: grid

1
2
3
4
5

3 colunas simples

1
2
3
4
5

2 rows

1
2
3
4
5

unidades

1
2
3
4
5

column-gap

1
2
3
4
5

row-gap

1
2
3
4
5

shorthand gap

1
2
3
4
5

grid-column to control spacing (colunas, p/ 1 item)

As colunas são definidas com linhas. Portanto, ha sempre mais uma linha vertical do que o total de colunas, e mais 1a horizontal q o taotal de linhas

na imagem, uma tabela c colunas 3x3, linhas 4x4

grid-colum aplica-se aos elementos, e nao no container

sintaxe:

grid-column: [linha onde começa] / [linha onde acaba]


(2 colunas, a começar na 1ª disponivel)
grid-column: 1 / 3

1
2
3
4
5: 2 cols

grid-rows (columns, p/ 1 item)

O equivalente a grid-columns, horizontal

1
2
3
4
5: 2 rows

justify-self (horizontal, p/ 1 item)

Justifica horizontalmente um item especifico. default = justify-self: stretch

1
2
3
4
5: just

justify-items (vertical, p/ container)

Justifica verticalmente todos os items do container. default = justify-self: stretch

1
2
3
4
5: just

align-items (vertical, container)

Justifica verticalmente todos os items do container. default = justify-self: stretch

1
2
3
4
5: align

area template (p/ container)

usando os nomes no template, podemos colocar itens no respectivo lugar

os conteudos colocados, mantem as definições da CSS de origem

esticam-se e juntam-se (como o merge de excel) a todas as areas vixinhas, c a mma area

os conteudos que já la estejam, são afastados

as celulas tem q formar colunas contiguas

inválido:

grid-template-areas: "header header content" ". content content" "footer footer footer"; inválido pq a 1ª linha tem 3 células, e tem q ser todas iguais tb inválido: grid-template-areas: "header header header" "header content content" "footer footer footer"; todas as cẽlulas formam 1a sequencia, como se lidas inline. Nessa sequencia as celulas n se podem intercalar vãlido: grid-template-areas: "header header header" "content content content" "footer footer footer";

1
2
3
4
5: merge

grid area, sem template (p/ 1 item)

não havendo template, podemos deixar o item definir o seu lugar nas rows e columns, definidos c grid-template-columns e grid-template-rows

usa as linhas das células. sintaxe: [linha vertic de inicio] / [horiz inicio] / [horiz fim] / [vertic fim]

1
2
3
4
5: g-area

repeat (p/ container)

para definir columns ou rows como n1 loop

sintaxe: repeat([n repetições], padrão a repetir)

repeat(4, 1fr) = 1fr 1fr 1fr 1fr

repeat(2, 1fr 50px) = 1fr 50px 1fr 50px

podemos usar esta função, juntamente c o formato manual

repeat(2, 1fr 50px) 20px = 1fr 50px 1fr 50px 20px

1
2
3
4
5: g-area

repeat (p/ container)

https://learn.freecodecamp.org/responsive-web-design/css-grid/limit-item-size-using-the-minmax-function

para definir columns ou rows como n1 loop

sintaxe: repeat([n repetições], padrão a repetir)

repeat(4, 1fr) = 1fr 1fr 1fr 1fr

repeat(2, 1fr 50px) = 1fr 50px 1fr 50px

podemos usar esta função, juntamente c o formato manual

repeat(2, 1fr 50px) 20px = 1fr 50px 1fr 50px 20px

1
2
3
4
5: g-area

minmax() (p/ 1 item)

https://learn.freecodecamp.org/responsive-web-design/css-grid/limit-item-size-using-the-minmax-function

define os valores minimos e maximos para cada item

1
2
3
4
5: g-area