grids of tomorrow: css grid layout
TRANSCRIPT
![Page 1: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/1.jpg)
SIMONE LELLIUI Designer & Developer @ Objectway
![Page 2: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/2.jpg)
I like drawing, coding and cooking…
...COOKING?
![Page 3: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/3.jpg)
YES! WE'RE GOING TO COOK AMAZINGLAYOUTS!
![Page 4: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/4.jpg)
CSS GRID: WHY I'M ENTHUSIASTI was a graphic designer
converted to web.
I love UI design and development.
CREATIVITY VS "FORCED" LAYOUT SOLUTIONS-.-
![Page 5: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/5.jpg)
Tables
Inline blocks
Floats
Flexbox
They are all hacks like this: it looks like an hamburger... but it is a veggie-burger...
![Page 6: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/6.jpg)
...IF YOU WANT A REAL BURGER...
![Page 7: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/7.jpg)
...YOU HAVE TO TAKE A STEP TO THE FUTURE!
![Page 8: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/8.jpg)
![Page 9: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/9.jpg)
WHY SHOULD I LEARN IT TODAY?
![Page 10: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/10.jpg)
TO BE COOL :)
![Page 11: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/11.jpg)
TO DRIVE YOUR TEAM TOMORROW!
![Page 12: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/12.jpg)
WHAT IS IT CSS GRID LAYOUTMODULE?
Two-dimensional grid layout system
You can use media queriesYou can order child elements as you want
![Page 13: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/13.jpg)
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)
![Page 14: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/14.jpg)
CSS GRID LAYOUT
TERMINOLOGY
![Page 15: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/15.jpg)
GRID LINES
They can be referred to by numbers or they can be named.
![Page 16: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/16.jpg)
GRID TRACK
The space between two tracks (horizontal or vertical)
![Page 17: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/17.jpg)
GRID CELL
The smallest unit of the grid (space between four tracks). It's something like a table cell.
![Page 18: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/18.jpg)
GRID AREA
Any area bounded by four lines: it may contain different gridcells.
![Page 19: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/19.jpg)
GRID GUTTERS
Useful for cases with regular gutter sizes.
![Page 20: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/20.jpg)
DEFINE THE GRIDA grid is defined by a new value of display property:
display: grid
![Page 21: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/21.jpg)
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>
![Page 22: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/22.jpg)
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; }
![Page 23: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/23.jpg)
A B C D E
F
Auto-placement: each item fill the first available cell but we don't want items inside gutter columns.
![Page 24: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/24.jpg)
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; }
![Page 25: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/25.jpg)
A B C
D E F
Now each item is placed in the right place.
![Page 26: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/26.jpg)
A grid area can span as many cells you want…
A B
C D
![Page 27: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/27.jpg)
A
B
C D
…in all directions and position…
![Page 28: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/28.jpg)
A
BC D
E
Place items where you want! No order problems orlimitations :)
![Page 29: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/29.jpg)
GRID GUTTERS
A B
C D
.table { grid-row-gap: 20px; grid-column-gap: 20px; }
/* Shorthand: row, column */ .table { grid-gap: 20px 20px; }
![Page 30: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/30.jpg)
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; }
![Page 31: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/31.jpg)
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] }
![Page 32: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/32.jpg)
POSITIONING ITEMS USING NAMEDLINES
.item.a { display: grid; grid-column: col1-start / col1-end; grid-row: row1-start / row1-end; }
![Page 33: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/33.jpg)
MAGIC AREAS!Header
ContentPrimarysidebar
Secondarysidebar
Footer
![Page 34: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/34.jpg)
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;}
![Page 35: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/35.jpg)
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" }
![Page 36: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/36.jpg)
FUNNY CODE, PERFECT RESULT
Header
ContentPrimarysidebar
Secondarysidebar
Footer
![Page 37: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/37.jpg)
VERY EASY TO CHANGE!
Header
ContentPrimarysidebar
Secondary sidebar Footer
![Page 38: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/38.jpg)
.grid-wrapper.change { grid-template-areas: "sidebar-a . content content content" ". . . . ." "sidebar-b sidebar-b sidebar-b . footer" ". . . . ." "header header header header header" }
![Page 39: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/39.jpg)
REPEAT
ANOTHER USEFUL FEATURE
![Page 40: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/40.jpg)
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); }
![Page 41: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/41.jpg)
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.
![Page 42: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/42.jpg)
Bye bye Bootstrap, bye bye Foundation...
![Page 43: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/43.jpg)
ONE MORE FUNNY THING…
OVERLAP
![Page 44: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/44.jpg)
A B C
D F
G
E
control overlaps with z-index
![Page 45: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/45.jpg)
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.
![Page 46: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/46.jpg)
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.
![Page 47: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/47.jpg)
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.
![Page 48: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/48.jpg)
!!! WOOOOOOOOOOOOOOOW !!!
![Page 49: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/49.jpg)
CSS GRID LAYOUTVS
FLEXBOX
![Page 50: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/50.jpg)
CSS GRID LAYOUT + FLEXBOX
![Page 51: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/51.jpg)
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).
![Page 52: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/52.jpg)
CSS Grid avoids redundant markup!
![Page 53: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/53.jpg)
A WELL-BALANCED MIX OF GRID AND FLEXIS THE KEY OF BETTER PERFORMANCE.
![Page 54: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/54.jpg)
THAT'S COOL, BUT IN REALITY?
![Page 55: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/55.jpg)
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.
![Page 56: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/56.jpg)
STATE OF THE SPECIFICATIONCurrently Working Dra� Level 1: 17 September 2015
Plans to move it forward to Last Call Working Dra� before CR.
![Page 57: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/57.jpg)
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
![Page 58: Grids of Tomorrow: CSS Grid Layout](https://reader034.vdocuments.mx/reader034/viewer/2022042707/58ce90a21a28ab8c3b8b5669/html5/thumbnails/58.jpg)
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.