SIMONE LELLIUI Designer & Developer @ Objectway

I like drawing, coding and cooking…

...COOKING?

YES! WE'RE GOING TO COOK AMAZINGLAYOUTS!

CSS GRID: WHY I'M ENTHUSIASTI was a graphic designer

converted to web.

I love UI design and development.

CREATIVITY VS "FORCED" LAYOUT SOLUTIONS-.-

Tables

Inline blocks

Floats

Flexbox

They are all hacks like this: it looks like an hamburger... but it is a veggie-burger...

...IF YOU WANT A REAL BURGER...

...YOU HAVE TO TAKE A STEP TO THE FUTURE!

WHY SHOULD I LEARN IT TODAY?

TO BE COOL :)

TO DRIVE YOUR TEAM TOMORROW!

WHAT IS IT CSS GRID LAYOUTMODULE?

Two-dimensional grid layout system

You can use media queriesYou can order child elements as you want

HOW CAN I TRY IT NOW?CHROME

chrome://flags/#enable-experimental-web-platform-features

FIREFOX set true layout.css.grid.enabled inside about:config

IE 10-11, EDGE -ms- prefix early implementation (with some differences)

CSS GRID LAYOUT

TERMINOLOGY

GRID LINES

They can be referred to by numbers or they can be named.

GRID TRACK

The space between two tracks (horizontal or vertical)

GRID CELL

The smallest unit of the grid (space between four tracks). It's something like a table cell.

GRID AREA

Any area bounded by four lines: it may contain different gridcells.

GRID GUTTERS

Useful for cases with regular gutter sizes.

DEFINE THE GRIDA grid is defined by a new value of display property:

display: grid

HTMLDefine a container with 6 child elements

<div class="grid-wrapper"> <div class="item a">A</div> <div class="item b">B</div> <div class="item c">C</div> <div class="item d">D</div> <div class="item e">E</div> <div class="item f">F</div> </div>

CSSDefines a grid of 5 columns and 3 rows with different size

.grid-wrapper { display: grid; grid-template-columns: 30% 5% 30% 5% 30%; grid-template-rows: 200px 20px 200px; }

A B C D E

F

Auto-placement: each item fill the first available cell but we don't want items inside gutter columns.

HOW TO PUT EACH ITEM IN THE RIGHT PLACE

.a { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }

/* SHORTHAND */

.a { grid-column: 1/2; grid-row: 1/2; }

A B C

D E F

Now each item is placed in the right place.

A grid area can span as many cells you want…

A B

C D

A

B

C D

…in all directions and position…

A

BC D

E

Place items where you want! No order problems orlimitations :)

GRID GUTTERS

A B

C D

.table { grid-row-gap: 20px; grid-column-gap: 20px; }

/* Shorthand: row, column */ .table { grid-gap: 20px 20px; }

SOMETHING MORE...You can span a grid area trough cells by lines numbers orwith span keyword: with span you can say "start at line 1

and span 4 lines".

.item { grid-column: 1 / span 4; } /* IS THE SAME OF */ .item { grid-column: 1 / 5; }

NAMED LINES

.grid-wrapper { display: grid; grid-template-columns: [col1-start] 200px [col1-end] 15px [col2-start] grid-template-rows: [row1-start] 200px [row1-end] 15px [row2-start] }

POSITIONING ITEMS USING NAMEDLINES

.item.a { display: grid; grid-column: col1-start / col1-end; grid-row: row1-start / row1-end; }

MAGIC AREAS!Header

ContentPrimarysidebar

Secondarysidebar

Footer

Define named areas: each item is assoaciated to a named area

.header {grid-area: header;} .content {grid-area: content;} .sidebar-a {grid-area: sidebar-a;} .sidebar-b {grid-area: sidebar-b;} .footer {grid-area: footer;}

Define grid and place named areas something like ASCII-art!

.grid-wrapper { display: grid; grid-template-columns: 30% 5% 30% 5% 30%; grid-template-rows: 200px 20px 200px; grid-template-areas: "header header header header header" ". . . . ." "sidebar-a . content . sidebar-b" ". . . . ." "footer footer footer footer footer" }

FUNNY CODE, PERFECT RESULT

Header

ContentPrimarysidebar

Secondarysidebar

Footer

VERY EASY TO CHANGE!

Header

ContentPrimarysidebar

Secondary sidebar Footer

.grid-wrapper.change { grid-template-areas: "sidebar-a . content content content" ". . . . ." "sidebar-b sidebar-b sidebar-b . footer" ". . . . ." "header header header header header" }

REPEAT

ANOTHER USEFUL FEATURE

EASY REPEAT A COLUMN/ROW PATTERN AS MANY TIMESYOU WANT!

.grid-wrapper { display: grid; grid-template-columns: repeat(12, [gutter] 10px [col] 1fr); grid-template-row: repeat(24, [gutter] 10px [row] 80px); }

THE "FR" UNITThe fr unit (fraction of available space) can be used for grid-

rows and grid-columns values. It works as percentages for available space when fixed-sized

and content-based columns/rows have taken their space.

Bye bye Bootstrap, bye bye Foundation...

ONE MORE FUNNY THING…

OVERLAP

A B C

D F

G

E

control overlaps with z-index

NEXT STEP: NESTED GRIDSHeader

SUB-GRID

SUB-GRID CONTENT

SUB-GRID FOOTER

SUB-GRIDSIDEBAR

Primarysidebar

Secondarysidebar

Footer

Outer grid contains another grid defined by display: gridproperty. Nested grid is independent by parent.

Nested grids can't inherit column widths from the parent.

. . .

grid: subgrid can do it but actually is not supported by browsers.

Subgird feature is at-risk and may be dropped during the CR period.

RESPONSIVE DESIGNCSS grids can be fully managed inside media queries:

you have great control and unbelievable possibilities forweb layouts.

Redefine elements position and size is very easy.

If you want you could also redefine your grid.

!!! WOOOOOOOOOOOOOOOW !!!

CSS GRID LAYOUTVS

FLEXBOX

CSS GRID LAYOUT + FLEXBOX

Grid is the best for complex page layoutsGrid is two-dimensional and supports non-linear designFlexbox is the ideal solution for small page componentsFlexbox is one-dimensional and supports linear design; remember that it works on axis (column and rowdirection).

CSS Grid avoids redundant markup!

A WELL-BALANCED MIX OF GRID AND FLEXIS THE KEY OF BETTER PERFORMANCE.

THAT'S COOL, BUT IN REALITY?

CHROME has the most advanced implementation (Blink).

SAFARI is close to Chrome implementation, prefixed -webkiton nightlies.

FIREFOX is in development.

IE10+ & EDGE have a working but outdated implementation.The update to current spec is high priority in backlog.

STATE OF THE SPECIFICATIONCurrently Working Dra� Level 1: 17 September 2015

Plans to move it forward to Last Call Working Dra� before CR.

USEFUL LINKS W3C Working Dra�

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

W3C Editor's Dra�https://dra�s.csswg.org/css-grid-1

Polyfill (by Fremy Company)https://github.com/FremyCompany/css-grid-polyfill

Codepen examples: , , 1 2 3

ENJOY IT!

Thank you ;)Characters in GIFs are of the respective owners. I'm sorry if I broke some copyright but it wasn't for commercial purposes.