Grids of Tomorrow: CSS Grid Layout

SIMONE LELLI
UI Designer & Developer @ Objectway

I like drawing, coding and cooking…
...COOKING?

YES! WE'RE GOING TO COOK AMAZING
LAYOUTS!

CSS GRID: WHY I'M ENTHUSIAST
I 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!

Grids of Tomorrow: CSS Grid Layout

WHAT IS IT CSS GRID LAYOUT
MODULE?
Two-dimensional grid layout system
You can use media queries
You 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 diﬀerences)

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 diﬀerent grid
cells.

GRID GUTTERS
Useful for cases with regular gutter sizes.

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

HTML
Define 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>

CSS
Defines a grid of 5 columns and 3 rows with diﬀerent 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 or
limitations :)

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 or
with 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 NAMED
LINES
.item.a {
display: grid;
grid-column: col1-start / col1-end;
grid-row: row1-start / row1-end;
}

MAGIC AREAS!
Header
Content
Primary
sidebar
Secondary
sidebar
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
Content
Primary
sidebar
Secondary
sidebar
Footer

VERY EASY TO CHANGE!
Header
Content
Primary
sidebar
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"
}

EASY REPEAT A COLUMN/ROW PATTERN AS MANY TIMES
YOU 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" UNIT
The 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 GRIDS
Header
SUB-GRID
SUB-GRID CONTENT
SUB-GRID FOOTER
SUB-GRID
SIDEBAR
Primary
sidebar
Secondary
sidebar
Footer
Outer grid contains another grid defined by display: grid
property. 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 DESIGN
CSS grids can be fully managed inside media queries:
you have great control and unbelievable possibilities for
web layouts.
Redefine elements position and size is very easy.
If you want you could also redefine your grid.

Grid is the best for complex page layouts
Grid is two-dimensional and supports non-linear design
Flexbox is the ideal solution for small page components
Flexbox is one-dimensional and supports linear design;
remember that it works on axis (column and row
direction).

CSS Grid avoids redundant markup!

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

CHROME has the most advanced implementation (Blink).
SAFARI is close to Chrome implementation, prefixed -webkit
on 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 SPECIFICATION
Currently 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.

Grids of Tomorrow: CSS Grid Layout

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Grids of Tomorrow: CSS Grid Layout (20)

Recently uploaded (20)

Grids of Tomorrow: CSS Grid Layout