Grids of Tomorrow: CSS Grid Layout
4 likes1,492 views
This document discusses CSS Grid Layout and provides an introduction to its key concepts and terminology. It explains how CSS Grid allows for two-dimensional page layouts with precise positioning of elements. Examples are given to demonstrate how to define a grid, position elements, use grid areas, gaps, repeats, and responsive design. CSS Grid is positioned as a better solution than older methods for complex page layouts, while Flexbox remains useful for small components.
![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]
}](https://image.slidesharecdn.com/gridsoftomorrow-cssgridlayout-160427220352/85/Grids-of-Tomorrow-CSS-Grid-Layout-31-320.jpg)
![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);
}](https://image.slidesharecdn.com/gridsoftomorrow-cssgridlayout-160427220352/85/Grids-of-Tomorrow-CSS-Grid-Layout-40-320.jpg)
Grids of Tomorrow: CSS Grid Layout
- 1. SIMONE LELLI UI Designer & Developer @ Objectway
- 2. I like drawing, coding and cooking… ...COOKING?
- 3. YES! WE'RE GOING TO COOK AMAZING LAYOUTS!
- 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 -.-
- 5. Tables Inline blocks Floats Flexbox They are all hacks like this: it looks like an hamburger... but it is a veggie-burger...
- 6. ...IF YOU WANT A REAL BURGER...
- 7. ...YOU HAVE TO TAKE A STEP TO THE FUTURE!
- 9. WHY SHOULD I LEARN IT TODAY?
- 10. TO BE COOL :)
- 11. TO DRIVE YOUR TEAM TOMORROW!
- 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)
- 15. GRID LINES They can be referred to by numbers or they can be named.
- 16. GRID TRACK The space between two tracks (horizontal or vertical)
- 17. GRID CELL The smallest unit of the grid (space between four tracks). It's something like a table cell.
- 18. GRID AREA Any area bounded by four lines: it may contain different grid cells.
- 19. GRID GUTTERS Useful for cases with regular gutter sizes.
- 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
- 27. A B C D …in all directions and position…
- 28. A BC D E Place items where you want! No order problems or limitations :)
- 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; }
- 31. 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] }
- 32. POSITIONING ITEMS USING NAMED LINES .item.a { display: grid; grid-column: col1-start / col1-end; grid-row: row1-start / row1-end; }
- 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" }
- 36. FUNNY CODE, PERFECT RESULT Header Content Primary sidebar Secondary sidebar Footer
- 37. VERY EASY TO CHANGE! Header Content Primary sidebar Secondary sidebar Footer
- 38. .grid-wrapper.change { grid-template-areas: "sidebar-a . content content content" ". . . . ." "sidebar-b sidebar-b sidebar-b . footer" ". . . . ." "header header header header header" }
- 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.
- 42. Bye bye Bootstrap, bye bye Foundation...
- 43. ONE MORE FUNNY THING… OVERLAP
- 44. A B C D F G E control overlaps with z-index
- 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.
- 50. CSS GRID LAYOUT + FLEXBOX
- 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).
- 52. CSS Grid avoids redundant markup!
- 53. A WELL-BALANCED MIX OF GRID AND FLEX IS THE KEY OF BETTER PERFORMANCE.
- 54. THAT'S COOL, BUT IN REALITY?
- 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.
- 57. 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
- 58. 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.