Introduction to CSS Grid - Full Stack, May 2017

CSS Grid is a powerful, relatively new tool that allows for two-dimensional layouts to be created on the web.

First, a trip back in time to discuss some past and current tools used to build layouts—tables, floats, and flexbox—and their limitations.

Then, an introduction to CSS Grid to discuss some of its possibilities and how it attempts to solve the problems of past limitations.

Learn CSS Grid—a guide to learning CSS Grid http://learncssgrid.com

This 15-minute talk was given at Full Stack Talks at Planning Center in Carlsbad, CA on May 4, 2017.

Transcript

1. An Introduction to C S S G R I D L A Y O U T
3. <table>
4. <table border="0" cellpadding="0" cellspacing="0" width="742" id="banner"> <tr> <td width="185" height="140"></td> <td width="186" height="140"></td> <td width="185" height="140"></td> <td width="186" height="140"></td> </tr> <tr> <td width="185" height="140"></td> <td width="186" height="140"></td> <td width="185" height="140"></td> <td width="186" height="140"></td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" width="745" id="parent"> <tr> <td width="160" valign="top"></td> <td width="105" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="navigation"> <tr> <td class="nav" width="100" valign="top" align="right"></td> </tr> </table> </td> <td width="480" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="content"> <tr> <td class="content"> <table border="0" cellpadding="0" cellspacing="0" width="474" id="content_top">
5. float: left|right;
6. .clearfix:after { content: " "; display: block; clear: both; }
7. .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 */ .clearfix { *zoom: 1; }
8. .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 */ .clearfix { *zoom: 1; } !
9. .table { display: table; width: 100%; height: 500px; } .table-cell { display: table-cell; text-align: center; vertical-align: middle; }
10. .div { width: 500px; margin-left: auto; margin-right: auto; top: 50%; transform: translateY(-50%); position: relative; }
11. display: ";
12. display: flex;
13. .container { display: flex; } .item { flex-basis: 25%; }
14. ❤ box alignment display: flex;
15. .container { height: 200px; display: flex; align-items: flex-start; } .item { flex-basis: 25%; }
16. .container { height: 200px; display: flex; align-items: flex-start; } .item { flex-basis: 25%; } .item--2 { align-self: center; } .item--3 { align-self: flex-end; } .item--4 { align-self: stretch; }
17. .container { height: 200px; display: flex; align-items: flex-start; justify-content: space-between; } .item { flex-basis: 15%; } .item--2 { align-self: center; } .item--3 { align-self: flex-end; } .item--4 { align-self: stretch; }
18. .container { display: flex; } .item { flex-basis: 25%; }
19. .container { display: flex; } .item { flex-basis: 25%; margin: 1em; }
20. .container { padding: 1em; display: flex; } .item { flex-basis: 25%; margin: 1em; }
21. .container { padding: 1em; display: flex; } .item { flex-basis: 25%; margin: 1em; }
22. .container { padding: 0.5em; display: flex; flex-wrap: wrap; } .item { flex-basis: 25%; margin: 1em; }
23. display: grid;
24. .container { display: grid; } .container { display: inline-grid; }
25. .container { display: grid; grid-template-rows: 100px 100px; grid-template-columns: 250px 250px; }
26. .container { display: grid; grid-template-rows: 100px 100px; grid-template-columns: 1fr 1fr; }
27. .container { display: grid; grid-template-rows: 100px 100px; grid-template-columns: 1fr 2fr 50px; }
28. .container { display: grid; grid-template-rows: minmax(auto, 300px); grid-template-columns: 1fr 1fr; }
29. .container { display: grid; grid-template-rows: minmax(auto, 300px); grid-template-columns: 1fr 1fr; }
30. .container { display: grid; grid-template-rows: 100px; grid-template-columns: 1fr 1fr; }
31. .container { display: grid; grid-template-rows: 100px; grid-template-columns: 1fr 1fr; } .container { display: grid; grid-template-rows: 100px 100px 100px; grid-template-columns: 1fr 1fr; }
32. .container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(2, 1fr); }
33. .container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(2, 1fr); } .container { display: grid; grid-template-rows: 100px 100px 100px; grid-template-columns: 1fr 1fr; }
34. .container { display: grid; grid-template-columns: 30px repeat(3, 1fr) 30px; }
35. grid gaps
36. .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 100px; grid-row-gap: 2em; grid-column-gap: 2em; }
37. .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 100px; grid-row-gap: 2em; grid-column-gap: 2em; } $
38. .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 100px; /* grid-row-gap: 2em; grid-column-gap: 2em; */ grid-gap: 2em; }
39. positioning grid items
40. .container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(2, 1fr); }
41. .container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(2, 1fr); } .item--1 { grid-row-start: 2; grid-column-start: 2; }
42. .container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(2, 1fr); } .item--1 { grid-row-start: 2; grid-column-start: 2; }
43. .container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(2, 1fr); } .item--1 { grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; }
44. .container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(2, 1fr); } .item--1 { /* grid-row-start: 2; grid-row-end: 3; */ grid-row: 2 / 3; /* grid-column-start: 2; grid-column-end: 3; */ grid-column: 2 / 3; }
45. .container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(2, 1fr); } .item--1 { /* grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; */ grid-area: 2 / 2 / 3 / 3; }
46. spanning grid items
47. .container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(3, 1fr); } .item--1 { grid-row-start: 1; grid-row-end: 3; grid-column-start: 2; grid-column-end: 4; }
48. .container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(3, 1fr); } .item--1 { /* grid-row-start: 1; grid-row-end: 3; */ grid-row: 1 / 3; /* grid-column-start: 2; grid-column-end: 4; */ grid-column: 2 / 4; }
49. .container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(3, 1fr); } .item--1 { /* grid-row-start: 1; grid-row-end: 3; */ grid-row: 1 / span 2; /* grid-column-start: 2; grid-column-end: 4; */ grid-column: 2 / span 2; }
50. grid line names
51. .container { display: grid; grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end]; grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end]; }
52. grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end]; grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end]; } .item--1 { grid-row-start: row-2-start; grid-column-start: col-2-start; grid-column-end: span 2; }
53. } .item--1 { /* grid-row-start: row-2-start; grid-column-start: col-2-start; grid-column-end: span 2; */ grid-row: row-2-start; grid-column: col-2-start / span 2; }
54. grid areas
55. .container { display: grid; grid-template-areas: "header header" "content sidebar" "footer footer"; grid-template-rows: 150px 1fr 100px; grid-template-columns: 1fr 100px; }
56. .container { display: grid; grid-template-areas: "header header" "content sidebar" "footer footer"; grid-template-rows: 150px 1fr 100px; grid-template-columns: 1fr 100px; }
57. "content sidebar" "footer footer"; grid-template-rows: 150px 1fr 100px; grid-template-columns: 1fr 100px; } .header { grid-area: header; } .content { grid-area: content; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; }
58. 150px 1fr 100px; grid-template-columns: 1fr 100px; } .header { grid-row-start: header-start; grid-row-end: content-start; grid-column-start: footer-start; grid-column-end: sidebar-end; } .content { grid-area: content; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; }
59. 150px 1fr 100px; grid-template-columns: 1fr 100px; } .header { grid-row-start: header-start; grid-row-end: content-start; grid-column-start: footer-start; grid-column-end: sidebar-end; } .content { grid-area: content; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; }
60. grid support
62. .container { display: flex; } @supports (display: grid) { .container { display: grid; } }
63. https:// developer.mozilla.org/en-US/ docs/Web/CSS/CSS_Grid_Layout
64. mdn css grid layout
65. @jensimmons @rachelandrew
66. learncssgrid.com @jonsuh