CSS Grid layout - De volta para o futuro

@afonsopacifer

Front-End Developer

#WriteCodeEveryDay.

I CSS

CSS Grid Layout?

Um modulo CSS3 que define um grid otimizado para interfaces

CSS Grid Layout Module Level 1

O futuro!

Flexbox

Interfaces simplesInterfaces complexas

Grid Layout

X É o presenteÉ o futuro

São diferentes e complementares!

Use os dois!

https://github.com/afonsopacifer/awesome-flexbox

A curated list of CSS Flexible Box Layout Module or only Flexbox.

AVISO!Working Draft

http://www.w3.org/TR/css-grid-1/

Terminologia

Grid LinesSão as linhas que dividem o grid.

Grid TracksÉ o termo genérico para o espaço entre duas grid lines, verticais ou horizontais.

Grid CellsTambém conhecida como grid item.

É o espaçamento entre duas line grids verticais e duas horizontais.

Grid AreasUm ou mais grid items (grid cells)

Show me the code

<div class=“container”> <div class=“a”>A</div> <div class=“b”>B</div> <div class=“c”>C</div> <div class=“d”>D</div> <div class=“e”>E</div> <div class=“f”>F</div>

</div>

HTML

Grid Container

.container { display: grid;

}

.container { display: inline-grid;

}

Line-based placement

.container { display: inline-grid;

}

A B C

D E F

1 column 2 column 3 column

2 ro

w1

row

3 ro

w

grid-template-rows: 100px 100px;grid-template-columns: 120px 120px 120px;

100px;

Line-based positioning

.a {

}

B C

D

grid-column-start: 1;grid-column-end: 2;grid-row-start: 1;grid-row-end: 2;

A

E.f {

}

grid-column-start: 3;grid-column-end: 4;grid-row-start: 2;grid-row-end: 3;

F

Line-based positioning Shorthand

B C

D

A

E F.a {

}

grid-column: 1 / 2;grid-row: 1 / 2;

.a {

}

grid-column-start: 1;grid-column-end: 2;grid-row-start: 1;grid-row-end: 2;

.a {

}grid-area: 1 / 1 / 2 / 2;

Responsive Web Design

Redefinindo o grid

C D

A

E F

.a {grid-area: 1 / 1 / 2 / 4;}

.b {grid-area: 2 / 1 / 3 / 2;}

.c {grid-area: 2 / 2 / 2 / 3;}

.d {grid-area: 2 / 3 / 2 / 4;}

.e {grid-area: 3 / 1 / 4 / 3;}

.d {grid-area: 3 / 3 / 4 / 4;}

B

@media screen and (max-width: 666px) {

}

.a {grid-area: 3 / 1 / 2 / 4;}

.e {grid-area: 1 / 1 / 2 / 3;}

.d {grid-area: 1 / 3 / 2 / 4;}

b c d

e f

A

frA nova unidade de medida

flex

A B C

.container { display: grid;

}

grid-template-rows: 100px;grid-template-columns: 100px auto 100px;

A B C

.container { display: grid;

}

grid-template-rows: 100px;grid-template-columns: 100px 1fr 100px;

.container { display: grid;

}

grid-template-rows: 100px;grid-template-columns: 1fr 1fr 1fr;

.container { display: grid;

}

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

A B C

1 + 1 + 1 = 31 1 1

2 + 1 + 1 = 4

A B C

2 1 1

Nomeando as areasModo Hardcore

.a {grid-area: header;}

.b {grid-area: aside;}

.c {grid-area: main;}

.d {grid-area: footer;}

.container { display: grid; grid-template-rows: auto; grid-template-columns: auto; grid-template-areas:“header header header” “aside . main” “aside content content” “. . footer”;

}

main

header

content

aside

footer

E muito mais

Qual navegador suporta isso?

sintaxe antiga

Browsers support

http://caniuse.com/css-grid

Vale a pena aprender?

Suporte dos navegadores visto por outro angulo

http://igalia.github.io/css-grid-layout/enable.html

Revista W - 2013

Best New Web Technology

https://thenetawards.com/vote/web-tech/css-grid-layout/

Eu quero usar hoje!

css-grid-polyfill

https://github.com/FremyCompany/css-grid-polyfill

Onde posso aprender mais?

Grid by Example

http://gridbyexample.com/

https://github.com/afonsopacifer/learning-css-grid-layout

Learning CSS Grid Layout

Obrigado :)