4. 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
-.-
12. 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
13. 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)
20. DEFINE THE GRID
A grid is defined by a new value of display property:
display: grid
21. 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>
22. CSS
Defines 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;
}
23. A B C D E
F
Auto-placement: each item fill the first available cell
but we don't want items inside gutter columns.
24. 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;
}
25. A B C
D E F
Now each item is placed in the right place.
26. A grid area can span as many cells you want…
A B
C D
29. GRID GUTTERS
A B
C D
.table {
grid-row-gap: 20px;
grid-column-gap: 20px;
}
/* Shorthand: row, column */
.table {
grid-gap: 20px 20px;
}
30. 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;
}
34. 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;}
35. 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"
}
40. 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);
}
41. 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.
45. 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.
46. 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.
47. 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.
51. 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).
55. 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.
56. STATE OF THE SPECIFICATION
Currently Working Dra Level 1: 17 September 2015
Plans to move it forward to Last Call Working Dra
before CR.