Getting to grips with CSS grid

CSS grid finally brings 2 dimensional layouts to CSS with some incredibly powerful tools for creating beautiful responsive layouts. Jo Franchetti starts with the basics of grid and then explores how to build some common layouts that you'll see around the web, along with some advice on what grid is not for!

Transcript

1. Getting to grips with CSS grid
2. Hello! I am Jo Franchetti I’m a web developer advocate for Samsung Internet You can find me at @thisisjofrank and @samsunginternet Also on medium https://medium.com/@jofranchetti
3. CSS Grid is the future of web layout But let’s talk briefly about how we did things in the past
4. Example: Making a grid of elements
6. With a table https://codepen.io/thisisjofrank/pen/ypXqzJ
9. With inline-block https://codepen.io/thisisjofrank/pen/MroXKL
12. With float https://codepen.io/thisisjofrank/pen/vpZjxY
15. Flexbox! https://codepen.io/thisisjofrank/pen/goxRQy
18. CSS grid A layout system for CSS optimised for two dimensional alignment
19. CSS grid properties apply to either: • the parent (grid container) • the children (grid elements/grid cells) Grid lines are the horizontal and vertical lines that form the basis of the grid structure Grid tracks are the rows or columns of your grid Grid gap is the space between the children
21. Grid container
22. Grid cell (or element)
23. Grid track
24. Grid track
25. Grid lines
26. Grid gap
28. .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 20px; } https://grid-cats.glitch.me/
31. .cards { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
32. .cards { grid-template-columns: repeat(6, 1fr); }
33. grid-column: span 2; grid-row: 2/4 grid-column: span 3 grid-column: 1/3
34. 1 2 3 4 5 6 7
35. grid-area: 1/1/3/5;
36. CSS grid and the Holy Grail https://grid-grail.glitch.me/ https://glitch.com/edit/#!/grid-grail
38. .container { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; min-height: 100vh; }
40. grid-column: span 3; grid-column: span 3;
41. Warnings!
42. ▪ Changing the order that elements appear in on the page is bad for accessibility (https://codepen.io/thisisjofrank/pen/jYJGgB, https://codepen.io/rachelandrew/pen/beBeKJ,) ▪ Other tools are still relevant (eg flexbox to center things!) ▪ Browser support is not 100%, but we can use @supports and fallbacks!
43. // flex:, // float:, // whatever styles you need here @supports (display: grid) { // code that will only run if CSS Grid is supported by the browser }
45. Other cool CSS Grid bits
46. Pseudo-elements (::before & ::after) are treated as grid items They’ll flow with the grid content, they’ll take up the space of a grid cell
47. Use grid-template-areas: to name areas of your grid https://codepen.io/thisisjofrank/pen/WzPJwd
48. display:contents Keep your semantic markup AND let child elements align with the grid
50. https://codepen.io/thisisjofrank/pen/wmEvqE https://caniuse.com/#search=contents
51. Define track sizing with max-content & min-content https://codepen.io/thisisjofrank/pen/mpopZj
52. Learn grid by gardening! http://cssgridgarden.com/
53. Also https://cssgrid.io/
54. Thank you! Any questions? You can find me at @thisisjofrank and @samsunginernet Also at https://medium.com/@jofranchetti
55. Quotations are commonly printed as a means of inspiration and to invoke philosophical thoughts from the reader.
57. Quotations are commonly printed as a means of inspiration and to invoke philosophical thoughts from the reader.
58. White Is the color of milk and fresh snow, the color produced by the combination of all the colors of the visible spectrum. You can also split your content Black Is the color of coal, ebony, and of outer space. It is the darkest color, the result of the absence of or complete absorption of light.
59. In two or three columns Yellow Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange. Blue Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum. Red Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.
60. A picture is worth a thousand words A complex idea can be conveyed with just a single still image, namely making it possible to absorb large amounts of data quickly.
61. Want big impact? Use big image.
62. Gray Use charts to explain your ideas White Black
63. And tables to compare data A B C Yellow 10 20 7 Blue 30 15 10 Orange 5 24 16
64. Maps our office
65. 89,526,124$ That’s a lot of money 100% Total success! 185,244 users And a lot of users
66. Our process is easy Last Second First
67. Let’s review some concepts Yellow Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange. Blue Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum. Red Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage. Yellow Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange. Blue Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum. Red Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.
68. You can copy&paste graphs from Google Sheets
69. Android project Show and explain your web, app or software projects using these gadget templates. Place your screenshot here
70. Android project real photo Show and explain your web, app or software projects using these gadget templates.
71. Place your screenshot here iPhone project Show and explain your web, app or software projects using these gadget templates.
72. iPhone project real photo Show and explain your web, app or software projects using these gadget templates.
73. Place your screenshot here Tablet project Show and explain your web, app or software projects using these gadget templates.
74. Place your screenshot here Desktop project Show and explain your web, app or software projects using these gadget templates.
75. Credits Special thanks to all the people who made and released these awesome resources for free: ▪ Presentation template by SlidesCarnival ▪ Photographs by Death to the Stock Photo (license) ▪ Diverse device hand photos by Facebook Design Resources
76. Presentation design This presentation uses the following typographies and colors: ▪ Titles: Arvo ▪ Body copy: Muli You can download the fonts on this page: https://www.google.com/fonts#UsePlace:use/Collection:Arvo:400,700,400italic,700it alic|Muli:400,400italic Click on the “arrow button” that appears on the top right Dark gray #4d778a Medium gray #7198a9 Light gray #cedbe0 Salmon #faa99c Sand #edc67b Lime #b0d85b Sky #37a9dd You don’t need to keep this slide in your presentation. It’s only here to serve you as a design guide if you need to create new slides or download the fonts to edit the presentation in PowerPoint®
77. SlidesCarnival icons are editable shapes. This means that you can: • Resize them without losing quality. • Change line color, width and style. Isn’t that nice? :) Examples:
78. Now you can use any emoji as an icon! And of course it resizes without losing quality and you can change the color. How? Follow Google instructions https://twitter.com/googledocs/status/730087240156643328 ✋ ❤ and many more...
79. Instructions for use EDIT IN GOOGLE SLIDES Click on the button under the presentation preview that says "Use as Google Slides Theme". You will get a copy of this document on your Google Drive and will be able to edit, add or delete slides. You have to be signed in to your Google account. EDIT IN POWERPOINT® Click on the button under the presentation preview that says "Download as PowerPoint template". You will get a .pptx file that you can edit in PowerPoint. Remember to download and install the fonts used in this presentation (you’ll find the links to the font files needed in the Presentation design slide) More info on how to use this template at www.slidescarnival.com/help-use-presentation-template This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention SlidesCarnival and other resources used in a slide footer.