Css Grid Layout

CSS Grid Layout - Guia Completo - display: grid; https://www.origamid.
com/projetos/css-grid-layout-guia-completo/
Grid Container
Guia CSS Grid Layout
display
grid-template-columns
grid-template-rows
grid-template-areas
Grid Container
grid-template O Grid Container é a tag que envolve os itens do grid, ao indicar
display: grid, essa tag passa a ser um Grid Container.
grid-gap
grid-auto-columns
grid-auto-rows
grid-auto-�ow
grid 1 • display
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
1 of 39 10/3/18, 3:09 PM
CSS Grid Layout - Guia Completo - display: grid; https://www.origamid.com/projetos/css-grid-layout-guia-completo/
Grid Container De�ne o elemento como um grid container. display: grid;

// Torna o elemento um grid container.
display
display: inline-grid;
// Torna o elemento um grid container
grid-template-rows porém com comportamento inline.
grid-template-areas
display: subgrid;
grid-template // Para grids dentro de grids (ainda
não é suportado, porém você pode
grid-gap
normalmente colocar display: grid; no
grid-auto-columns grid dentro do grid que funciona).
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
2 of 39 10/3/18, 3:09 PM
EDIT ON
Grid Container HTML CSS Result
display 1 ▾ /* Grid Container */

2 ▾ .grid {
grid-template-columns 3 display: grid; display: block;
4 }
grid-template-rows
5 1
grid-template-areas 6 ▾ .grid-template-columns {
7 grid-template-columns: 200px 200px; 2
grid-template 8 }
9
3
grid-gap
10 ▾ .grid-template-columns-3 { 4
grid-auto-columns 11 grid-template-columns: 1fr 2fr 1fr;
12 }
grid-auto-rows
13
grid-auto-�ow 14 ▾ .subgrid {
15 display: grid;
grid 16 grid-template-columns: 1fr 1fr 1fr; display: grid;
17 grid-gap: 10px;
justify-content
18 } 1
align-content
justify-items
align-items
Grid Item
grid-column
2 • grid-template-columns
grid-row
3 of 39 10/3/18, 3:09 PM
Grid Container De�ne o número total de colunas que serão grid-template-columns: 100px
criadas no grid. 100px 100px 100px;
display // Quatro colunas de 100px de largura
grid-template-columns são criadas
grid-template-rows grid-template-columns: 1fr 2fr;

grid-template-areas // Duas colunas são criadas, sendo a
segunda com o dobro do tamanho da
grid-template primeira. fr é uma unidade fracional.
O tamanho do conteúdo é respeitado, ou
grid-gap
seja, se o conteúdo na primeira coluna
grid-auto-columns for maior que o da segunda, a primeira
será maior.
grid-auto-rows
grid-auto-�ow grid-template-columns:
grid minmax(200px, 1fr) 1fr 1fr;

// Três colunas são criadas, a
justify-content primeira terá no mínimo 200px de
largura e no máximo 1fr(isso significa
align-content
que após 200px ela se expande da mesma
justify-items forma que as outras colunas). As
outras duas colunas vão ter 1fr.
align-items
grid-template-columns: repeat(3,
Grid Item 1fr);
// Cria 3 colunas com 1fr de tamanho.
grid-column O repeat seria a mesma coisa que
escrever 1fr 1fr 1fr.
grid-row
4 of 39 10/3/18, 3:09 PM
EDIT ON
display 1 ▾ /* Grid */
2 ▾ .grid {
grid-template-columns 3 display: grid; grid-template-columns: 100px 100px
4 } 100px 100px;
grid-template-rows
5
grid-template-areas 6 ▾ /* 100px é o valor total, ignora 1 2 3
conteúdo, margem e etc. Respeita
grid-template apenas o min-width do item.*/
grid-gap 7 ▾ .grid-template-columns-1 {
8 grid-template-columns: 100px 100px
grid-auto-columns 100px 100px;
9 } grid-template-columns: 100px 100px
grid-auto-rows 100px 100px;
10
grid-auto-�ow 11 ▾ /* fr é uma unidade fracional */
12 ▾ .grid-template-columns-2 { PalavraTeste 2 3 PalavraTeste
grid 13 grid-template-columns: 1fr 2fr;
14 }
justify-content
15
align-content
justify-items
align-items
Grid Item
grid-column
3 • grid-template-rows
grid-row
5 of 39 10/3/18, 3:09 PM
Grid Container De�ne a quantidade de linhas no grid. grid-template-rows: 50px 100px

50px 150px;
display // Cria 4 linhas no grid, sendo a
grid-template-columns primeira com 50px, segunda 100px,
terceira 50px e quarta 150px. Caso o
grid-template-rows grid necessite de mais linhas, elas
terão o tamanho de acordo com o
grid-template-areas
conteúdo.
grid-template
grid-template-rows: 1fr 2fr;
grid-gap
// Cria 2 linhas no grid, sendo a
grid-auto-columns segunda com cerca de duas vezes o
tamanho da primeira.
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
6 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; grid-template-rows: 50px 100px 50px
4 grid-template-columns: 1fr 1fr; 150px;
grid-template-rows
5 }
grid-template-areas 6 1 2
7 ▾ .grid-template-rows-1 {
grid-template 8 grid-template-rows: 50px 100px 50px
150px; 3 4
grid-gap
9 }
grid-auto-columns 10
11 ▾ .grid-template-rows-2 {
grid-auto-rows
12 grid-template-rows: 100px 100px;
grid-auto-�ow 13 } 5 6
14
grid 15 ▾ .grid-template-rows-3 {
7 8
16 grid-template-rows: 1fr 2fr 1fr
justify-content
3fr;
align-content
justify-items
align-items
Grid Item
grid-column
4 • grid-template-areas
grid-row
7 of 39 10/3/18, 3:09 PM
Grid Container De�ne áreas especí�cas no grid. O ponto (.) grid-template-areas:

pode ser utilizado para criar áreas vazias. "logo nav nav"
display
"sidenav content advert"
grid-template-columns "sidenav footer footer";
grid-template-rows // Cria 3 colunas e 3 linhas. [logo]
ocupa a coluna 1, linha 1. [nav] ocupa
grid-template-areas da coluna 2 a 3, linha 1. [sidenav]
ocupa a coluna 1, da linha 2 a 3.
grid-template
[content] ocupa a coluna 2, linha 2.
grid-gap [advert] ocupa a coluna 3, linha 2.
[footer] ocupa da coluna 2 a 3, linha
grid-auto-columns 3
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
8 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; grid-template-areas
4 }
grid-template-rows
5 logo nav
grid-template-areas 6 ▾ .logo {
7 grid-area: logo; sidenav content advert
grid-template 8 }
9
footer
grid-gap
10 ▾ .nav {
grid-auto-columns 11 grid-area: nav;
12 }
grid-auto-rows
13
grid-auto-�ow 14 ▾ .content {
grid-template-areas
15 grid-area: content;
grid 16 }
sidenav logo nav
17
justify-content
18 ▾ .sidenav { content advert
align-content
justify-items
align-items
Grid Item
grid-column
5 • grid-template
grid-row
9 of 39 10/3/18, 3:09 PM
Grid Container Atalho para de�nir o grid-template-columns, grid-template:

grid-template-rows e grid-template-areas. "logo nav nav" 50px
display
"sidenav content advert" 150px
grid-template-columns "sidenav footer footer" 100px
grid-template-rows / 100px 1fr 50px;
// A primeira linha com 50px, segunda
grid-template-areas
com 150px e terceira com 100px. A
grid-template primeira coluna com 100px, a segunda
1fr e a terceira com 50px.
grid-gap
grid-auto-columns
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
10 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; grid-template: 50px 1fr / 100px 1fr
4 } 100px
grid-template-rows
5
grid-template-areas 6 ▾ .grid-template-1 { logo nav content
7 grid-template: 50px 1fr / 100px 1fr
grid-template 100px;
8 } sidenav advert footer
grid-gap
9
grid-auto-columns 10 ▾ .grid-template-2 {
11 grid-template:
grid-auto-rows
12 "logo nav nav" 50px
grid-auto-�ow 13 "sidenav content advert" 150px
grid-template (areas, columns e rows)
14 "sidenav footer footer" 100px
grid 15 / 100px 1fr 50px;
16 }
logo nav
justify-content
17
align-content
justify-items
align-items
Grid Item
grid-column
6 • grid-gap
grid-row
11 of 39 10/3/18, 3:09 PM
Grid Container De�ne o gap (gutter) entre os elementos do grid-gap: 20px

grid. // Define 20px entre os elementos do
display grid (linha e coluna).
grid-column-gap: 20px
grid-template-rows // Define 20px de distântica entre as
colunas.
grid-template-areas
grid-template grid-row-gap: 20px
// Define 20px de distântica entre as
grid-gap
linhas.
grid-auto-columns
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
12 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; grid-gap: 20px;
4 }
grid-template-rows
5 ▾ .grid-template { logo nav
grid-template-areas 6 grid-template:
grid-template 8 "sidenav content advert" 150px
sidenav content advert
grid-gap
10 / 100px 1fr 50px;
grid-auto-columns 11 }
12
grid-auto-rows
13 ▾ .grid-gap {
grid-auto-�ow 14 grid-gap: 20px;
15 }
grid 16
17 ▾ .grid-column-gap { footer
justify-content
18 grid-gap: 2px;
align-content
justify-items
align-items
Grid Item
grid-column
7 • grid-auto-columns
grid-row
13 of 39 10/3/18, 3:09 PM
Grid Container De�ne o tamanho das colunas do grid grid-auto-columns: 100px

implicito (gerado automaticamente, quando // As colunas implicitas, geradas
display algum elemento é posicionado em uma automaticamente, terão 100px de
coluna que não foi de�nida). largura.
grid-template-rows
EDIT ON
grid-template-areas HTML CSS Result
grid-template 1 ▾ /* Grid */
2 ▾ .grid {
grid-gap
3 display: grid; grid-auto-columns: 100px;
grid-auto-columns 4 }
5 1 2 3 4 5
grid-auto-rows 6 ▾ .grid-auto-columns-1 {
grid-auto-�ow 7 grid-template-columns: 1fr 1fr; 6
8 grid-auto-columns: 100px;
grid 9 }
10
justify-content
11 ▾ /* Ele força a criação de 5 colunas
align-content */
12 ▾ .item-6 { grid-auto-columns: 50px 100px;
justify-items 13 grid-column: 5;
14 } 1 2 3 4 5 6
align-items
15
16 ▾ .grid-auto-columns-2 {
Grid Item 17 grid-template-columns: 1fr 1fr;
grid-column
grid-row
14 of 39 10/3/18, 3:09 PM
Grid Container
8 • grid-auto-rows
display
grid-template-rows De�ne o tamanho das linhas do grid grid-auto-rows: 100px
grid-template-areas implicito (gerado automaticamente, quando // As linhas implicitas, geradas
algum elemento é posicionado em uma linha automaticamente, terão 100px de
grid-template que não foi de�nida). altura.
grid-gap
grid-auto-columns
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
15 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; grid-auto-rows: 100px;
4 }
grid-template-rows
5 1
grid-template-areas 6 ▾ .grid-auto-rows-1 {
7 grid-template-rows: 1fr 1fr; 2
grid-template 8 grid-auto-rows: 100px;
9 }
3
grid-gap
10
grid-auto-columns 11 ▾ .grid-auto-rows-2 {
12 grid-template:
grid-auto-rows
grid-auto-�ow 14 "sidenav content advert" 150px 4
grid 16 / 100px 1fr 50px;
17 grid-auto-rows: 50px 100px;
justify-content
18 }
align-content
justify-items
align-items
Grid Item
grid-column
9 • grid-auto-�ow
grid-row
16 of 39 10/3/18, 3:09 PM
Grid Container De�ne o �uxo dos itens no grid. Se eles vão grid-auto-flow: row
automaticamente gerar novas linhas ou // Automaticamente gera novas linhas.
display colunas.
grid-auto-flow: column
// Automaticamente gera novas colunas.
grid-template-rows
grid-template-areas grid-auto-flow: dense
// Tenta posicionar o máximo dos
grid-template elementos que existirem nas primeiras
partes do grid (pode desorganizar o
grid-gap
conteúdo).
grid-auto-columns
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
17 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; grid-auto-flow: column;
4 }
grid-template-rows
5 1 2 3 4 5
grid-template-areas 6 ▾ .grid-auto-flow-1 {
7 grid-auto-flow: column;
grid-template 8 }
grid-gap 9
10 ▾ .grid-auto-flow-2 {
grid-auto-columns 11 grid-template-columns: repeat(2, grid-auto-flow: column;
minmax(100px, 1fr));
grid-auto-rows
12 grid-template-rows: 50px 50px; 1 3 5
grid-auto-�ow 13 grid-auto-columns: 100px;
14 grid-auto-flow: column;
grid 15 } 2 4
16
justify-content
17 ▾ .grid-auto-rows-2 {
align-content
justify-items
align-items
Grid Item
grid-column
10 • grid
grid-row
18 of 39 10/3/18, 3:09 PM
Grid Container Atalho geral para de�nir o grid: grid- grid: 100px / 1fr 1fr
template-rows, grid-template-columns, grid- // Gera uma linha com 100px de altura
display template-areas, grid-auto-rows, grid-auto- e 2 colunas com 1fr.
columns e grid-auto-�ow
grid: 100px / auto-flow 100px
grid-template-rows 50px
grid-template-areas // Gera uma linha com 100px de altura.
O grid-auto-flow é definido como
grid-template column (pois está logo antes da
definição das colunas). Ele também
grid-gap
define o grid-auto-columns com 100px
grid-auto-columns 50px
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
19 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; grid: 100px / 1fr 1fr;
4 }
grid-template-rows
5 1 2
grid-template-areas 6 ▾ .grid-1 {
7 grid: 100px / 1fr 1fr;
grid-template 8 }
grid-gap 9
10 ▾ .grid-2 {
3 4
grid-auto-columns 11 grid: 100px / auto-flow 100px 50px;
grid-auto-rows
12 } 5
13
grid-auto-�ow 14 ▾ .grid-3 {
15 grid:
grid 16 "logo nav nav" 50px
17 "sidenav content advert" 150px
justify-content
18 "sidenav footer footer" 100px grid: 100px / auto-flow 100px 50px;
align-content
justify-items
align-items
Grid Item
grid-column
11 • justify-content
grid-row
20 of 39 10/3/18, 3:09 PM
Grid Container Justi�ca os itens do grid em relação ao eixo x justify-content: start

(horizontal). // Justifica os itens ao início.
display
justify-content: end
// Justifica os itens ao final.
grid-template-rows
grid-template-areas justify-content: stretch
// Estica os itens.
grid-template
grid-gap justify-content: space-around
// Distribui espaço entre os
grid-auto-columns elementos. (O início e final são
grid-auto-rows menores que os espaços internos).
grid-auto-�ow justify-content: space-between

grid // Cria um espaço entre os elementos,
ignorando o início e final.
justify-content
align-content justify-content: space-evenly
// Cria um espaço igual entre as
justify-items colunas (no início e final também).
align-items
justify-content: center
// Centraliza o conteúdo.
Grid Item
grid-column
grid-row
21 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; justify-content: start;
4 grid-template-columns: repeat(3,
grid-template-rows
100px); 1 2 3
grid-template-areas 5 grid-template-rows: 100px 100px
100px;
grid-template 6 }
grid-gap 7
8 ▾ .start {
4
grid-auto-columns 9 justify-content: start;
10 }
grid-auto-rows
11
grid-auto-�ow 12 ▾ .end {
13 justify-content: end;
grid 5 6
14 }
15
justify-content
16 ▾ .center {
align-content
justify-items
align-items
Grid Item
grid-column
12 • align-content
grid-row
22 of 39 10/3/18, 3:09 PM
Grid Container Alinha os itens do grid em relação ao eixo y align-content: start

(vertical). // Alinha os itens ao início.
display
align-content: end
// Alinha os itens ao final.
grid-template-rows
grid-template-areas align-content: stretch
// Estica os itens.
grid-template
grid-gap align-content: space-around
// Distribui espaço entre os
grid-auto-columns elementos. (O início e final são
grid-auto-rows menores que os espaços internos).
grid-auto-�ow align-content: space-between

grid // Cria um espaço entre os elementos,
ignorando o início e final.
justify-content
align-content align-content: space-evenly
// Cria um espaço igual entre as
justify-items colunas (no início e final também).
align-items
align-content: center
Grid Item
grid-column
grid-row
23 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; align-content: start;
grid-template-rows
1fr); 1 2 3
grid-template-areas 5 grid-template-rows: repeat(3,
50px);
grid-template 6 height: 300px; 4
grid-gap 7 }
8
5 6
grid-auto-columns 9 ▾ .start {
10 align-content: start;
grid-auto-rows
11 }
grid-auto-�ow 12
13 ▾ .end {
grid 14 align-content: end;
15 }
justify-content
16
align-content
justify-items
align-items
Grid Item
grid-column
13 • justify-items
grid-row
24 of 39 10/3/18, 3:09 PM
Grid Container Justi�ca o conteúdo dos itens do grid em justify-items: start

relação ao eixo x (horizontal). Justi�ca em // Justifica os itens ao início.
display relação a célula.
justify-items: end
// Justifica os itens ao final.
grid-template-rows
grid-template-areas justify-items: center
grid-template
grid-gap justify-items: stretch
// Estica os itens.
grid-auto-columns
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
25 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; justify-items: start;
grid-template-rows
1fr); Teste 1 Ae 2 Isso 3
50px);
grid-template 6 } Ab 4
grid-gap 7
8 ▾ .start {
Aqui 5 Ela 6
grid-auto-columns 9 justify-items: start;
10 }
grid-auto-rows
11
13 justify-items: end;
grid 14 }
15 justify-items: end;
justify-content
16 ▾ .center {
align-content
justify-items
align-items
Grid Item
grid-column
14 • align-items
grid-row
26 of 39 10/3/18, 3:09 PM
Grid Container Alinha o conteúdo dos itens do grid em align-items: start

relação ao eixo y (vertical). Alinha em relação // Alinha os itens ao início.
display a célula.
align-items: end
// Alinha os itens ao final.
grid-template-rows
grid-template-areas align-items: center
grid-template
grid-gap align-items: stretch
// Estica os itens.
grid-auto-columns
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
27 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; align-items: start;
grid-template-rows
1fr); Teste 1 Ae 2 Isso 3
100px);
grid-template 6 }
grid-gap 7
8 ▾ .start {
Ab 4 Aqui 5 Ela 6
grid-auto-columns 9 align-items: start;
10 }
grid-auto-rows
11
13 align-items: end;
grid 14 }
15
justify-content
16 ▾ .center {
align-content
justify-items
align-items
Grid Item Grid Item

grid-column Os Grid Itens são os �lhos diretos do Grid Container. Um grid item
grid-row pode ser explicito ou implicito. Explicito é quanto você de�ne ele
28 of 39 10/3/18, 3:09 PM
explicitamente no container e implicito é quanto ele é criado

Grid Container automaticamente para preencher o conteúdo no grid.
display
grid-template-rows
grid-template-areas
grid-template
1 • grid-column
grid-gap
grid-auto-columns
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
29 of 39 10/3/18, 3:09 PM
Grid Container De�ne quais colunas serão ocupadas pelo grid-column: 1

grid item. É possível de�nir uma linha de // O item ocupará a coluna 1.
display início e �nal, assim o item irá ocupar
múltiplas colunas. grid-column: 1 / 3
// O item ocupará a coluna 1 e 2 (Sim,
grid-template-rows isso mesmo, 1 e 2, pois os valores 1 /
3 são referentes as linhas da coluna.
grid-template-areas
Isso significa que começa na linha 1
grid-template (início do grid) e vai até a linha 3,
que é o começo da terceira coluna).
grid-gap
grid-auto-columns grid-column-start: 2
// O item vai começar na linha 2.
grid-auto-rows
grid-auto-�ow grid-column-end: 4
// O item vai terminar na linha 4.
grid
justify-content grid-column: span 2
// O item irá ocupar duas colunas a
align-content
partir de onde ele estiver.
justify-items
align-items
Grid Item
grid-column
grid-row
30 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; grid-column
grid-template-rows
1fr); 1
grid-template-areas 5 grid-auto-rows: 50px;
6 }
grid-template 7 2
grid-gap 8 ▾ /* 1 */
9
3 4 5
grid-auto-columns 10 ▾ .grid-column-1 .item-1 {
11 grid-column: 3;
grid-auto-rows
12 } 6
grid-auto-�ow 13
14 ▾ .grid-column-1 .item-3 {
grid 15 grid-column: 1;
16 }
justify-content
17
align-content
justify-items
align-items
Grid Item
grid-column
2 • grid-row
grid-row
31 of 39 10/3/18, 3:09 PM
Grid Container De�ne quais linhas serão ocupadas pelo grid grid-row: 1
item. // O item ocupará a linha 1.
display
Atenção aqui, pois esse linha é referente a grid-row: 1 / 3
grid-template-columns row. Porém as chamadas grid lines que por // O item ocupará a linha 1 e 2 (Sim,
grid-template-rows tradução também signi�cam linhas do grid, isso mesmo, 1 e 2, pois os valores 1 /
são diferentes. Uma row (linha), possui 3 são referentes as linhas do grid.
grid-template-areas sempre 2 grid lines (linhas do grid), uma no Isso significa que começa na linha 1
grid-template início dela e uma no �nal dela. (início do grid) e vai até a linha 3
do grid, que é o começo da terceira
grid-gap linha).
grid-auto-columns
grid-row-start: 2
grid-auto-rows // O item vai começar na linha do grid
grid-auto-�ow 2.
grid grid-row-end: 4
justify-content // O item vai terminar na linha do
grid 4.
align-content
justify-items grid-row: span 2
// O item irá ocupar duas linhas a
align-items partir de onde ele estiver.
Grid Item
grid-column
grid-row
32 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; grid-row
grid-template-rows
1fr); 3 2 4
6 }
grid-template 7 5 6
grid-gap 8 ▾ /* 1 */
9
1
grid-auto-columns 10 ▾ .grid-row-1 .item-1 {
11 grid-row: 3;
grid-auto-rows
12 }
grid-auto-�ow 13
14 ▾ .grid-row-1 .item-3 {
grid 15 grid-row: 1;
16 } grid-row span
justify-content
17
align-content
justify-items
align-items
Grid Item
grid-column
3 • grid-area
grid-row
33 of 39 10/3/18, 3:09 PM
Grid Container De�ne a área do item do grid. É um atalho grid-area: 1 / 2 / 4 / 3;

para grid-row-start, grid-column-start, grid- // Este é um atalho para:
display row-end, grid-column-end. grid-row-start: 1;
grid-column-start: 2;
grid-template-columns O z-index pode ser utilizado para manipular grid-row-end: 4;
grid-template-rows a posição no eixo Z do item. Ou seja, se um grid-column-end: 3;
item for posicionado em cima de outro, o
grid-template-areas z-index controla qual vêm na frente. grid-area: header;
grid-template // Vai posicionar o item na área
definida como header.
grid-gap
grid-auto-columns
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
34 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; grid-area: 1 / 2 / 4 / 3;
grid-template-rows
1fr); 2 1 3
6 }
grid-template 7 4 5
grid-gap 8 ▾ /* 1 */
9
6
grid-auto-columns 10 ▾ .grid-area-1 .item-1 {
11 grid-area: 1 / 2 / 4 / 3;
grid-auto-rows
12 grid-row-start: 1;
grid-auto-�ow 13 grid-column-start: 2;
14 grid-row-end: 4;
grid 15 grid-column-end: 3;
16 } grid-area: header;
justify-content
17
align-content
justify-items
align-items
Grid Item
grid-column
4 • justify-self
grid-row
35 of 39 10/3/18, 3:09 PM
Grid Container Justi�ca o item do grid em relação ao eixo x justify-self: start

(horizontal). Justi�ca em relação a célula. // Justifica o item ao início.
display
justify-self: end
// Justifica o item ao final.
grid-template-rows
grid-template-areas justify-self: center
grid-template
grid-gap justify-self: stretch
// Estica o item.
grid-auto-columns
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
36 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; justify-self: start;
grid-template-rows
1fr); 1 2 3
50px);
grid-template 6 } 4
grid-gap 7
8 ▾ /* 1 */
5 6
grid-auto-columns 9
10 ▾ .start .item-2 {
grid-auto-rows
11 justify-self: start;
grid-auto-�ow 12 }
13
grid 14 ▾ .start .item-5 {
15 justify-self: start; justify-self: end;
justify-content
16 }
align-content
justify-items
align-items
Grid Item
grid-column
5 • align-self
grid-row
37 of 39 10/3/18, 3:09 PM
Grid Container Justi�ca o item do grid em relação ao eixo y align-self: start

(vertical). Alinha em relação a célula. // Alinha o item ao início.
display
align-self: end
// Alinha o item ao final.
grid-template-rows
grid-template-areas align-self: center
grid-template
grid-gap align-self: stretch
// Estica o item.
grid-auto-columns
grid-auto-rows
grid-auto-�ow
grid
justify-content
align-content
justify-items
align-items
Grid Item
grid-column
grid-row
38 of 39 10/3/18, 3:09 PM
EDIT ON
2 ▾ .grid {
grid-template-columns 3 display: grid; align-self: start;
grid-template-rows
1fr); 1 2 3
50px);
grid-template 6 } 4
grid-gap 7
8 ▾ /* 1 */
5 6
grid-auto-columns 9
10 ▾ .start .item-2 {
grid-auto-rows
11 align-self: start;
grid-auto-�ow 12 }
13
grid 14 ▾ .start .item-5 {
15 align-self: start; align-self: end;
justify-content
16 }
align-content
justify-items
align-items
Origamid © 2012 - 2017. Alguns direitos reservados. CNPJ: 23.811.568/0001-98
Praia de Botafogo, 300, 5º andar - Botafogo - Rio de Janeiro - RJ - 22250-040.
Grid Item Principais referências utilizadas para a criação deste guia: CSS Tricks e Grid By Example
grid-column
grid-row
39 of 39 10/3/18, 3:09 PM

Css Grid Layout

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Css Grid Layout

Caricato da

Copyright:

Formati disponibili

CSS Grid Layout - Guia Completo - display: grid; https://www.origamid.

Grid Container De�ne o elemento como um grid container. display: grid;

Grid Container HTML CSS Result

display 1 ▾ /* Grid Container */

grid-template-rows grid-template-columns: 1fr 2fr;

grid minmax(200px, 1fr) 1fr 1fr;

Grid Container HTML CSS Result

Grid Container De�ne a quantidade de linhas no grid. grid-template-rows: 50px 100px

Grid Container HTML CSS Result

Grid Container De�ne áreas especí�cas no grid. O ponto (.) grid-template-areas:

Grid Container HTML CSS Result

Grid Container Atalho para de�nir o grid-template-columns, grid-template:

Grid Container HTML CSS Result

Grid Container De�ne o gap (gutter) entre os elementos do grid-gap: 20px

Grid Container HTML CSS Result

Grid Container De�ne o tamanho das colunas do grid grid-auto-columns: 100px

Grid Item 17 grid-template-columns: 1fr 1fr;

Grid Container HTML CSS Result

Grid Container HTML CSS Result

Grid Container HTML CSS Result

Grid Container Justi�ca os itens do grid em relação ao eixo x justify-content: start

grid-auto-�ow justify-content: space-between

Grid Container HTML CSS Result

Grid Container Alinha os itens do grid em relação ao eixo y align-content: start

grid-auto-�ow align-content: space-between

Grid Container HTML CSS Result

Grid Container Justi�ca o conteúdo dos itens do grid em justify-items: start

Grid Container HTML CSS Result

Grid Container Alinha o conteúdo dos itens do grid em align-items: start

Grid Container HTML CSS Result

Grid Item Grid Item

explicitamente no container e implicito é quanto ele é criado

Grid Container De�ne quais colunas serão ocupadas pelo grid-column: 1

Grid Container HTML CSS Result

Grid Container HTML CSS Result

Grid Container De�ne a área do item do grid. É um atalho grid-area: 1 / 2 / 4 / 3;

Grid Container HTML CSS Result

Grid Container Justi�ca o item do grid em relação ao eixo x justify-self: start

Grid Container HTML CSS Result

Grid Container Justi�ca o item do grid em relação ao eixo y align-self: start

Grid Container HTML CSS Result

Potrebbero piacerti anche