Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to CSS Grid

Introduction to CSS Grid

When it comes to building responsive web layouts we’ve used tables, floats and Flexbox. Now there’s CSS Grid and it's completely changing the way we should think about layouts. In this talk, we’ll go over the basics of Grid and what differentiates it from other techniques. Through code examples and demos, you’ll walk out of this talk able to start using Grid right away.

Ee1cb48dc1cdee598dc0877cef84ff4b?s=128

Kara Luton

April 13, 2019
Tweet

More Decks by Kara Luton

Other Decks in Technology

Transcript

  1. Presented by Kara Luton @karaluton CODESTOCK 2019

  2. Based in Nashville, TN Ballerina → Music Publicist → Tech

    UX Engineer at CrowdStrike Organizer for the Nashville Tech Ladies chapter
  3. None
  4. None
  5. “More than a layout module, CSS Grid is an invitation

    to reaffirm our original intent with web design and development: to create accessible, extensible solutions that bring content to those interested in the best way possible. At the core of any front-end web project is a simple principle: First, make it accessible, then make it fancy, and make sure the fancy doesn’t break accessibility.”
  6. None
  7. None
  8. None
  9. None
  10. The element containing the grid, defined by setting: display: grid;

  11. Any element that is a direct descendant of the grid

    container.
  12. The intersection between a grid-row and a grid-column.

  13. Rectangular area between four specific grid lines. Can cover one

    or more cells.
  14. Horizontal (row) or vertical (column) line separating the grid into

    sections.
  15. The space between two grid lines either horizontal or vertical.

  16. The empty space between grid tracks. Commonly called gutters.

  17. None
  18. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; }
  19. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns: 200px 200px 200px; } .grid { display: grid; grid-template-columns : 200px 200px 200px ; }
  20. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns: 200px 200px 200px; } .grid { display: grid; grid-template-columns: repeat(3, 200px); } .grid { display: grid; grid-template-columns : 200px 200px 200px ; }
  21. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns : repeat(3, 200px) ; grid-gap: 100px; }
  22. None
  23. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns : repeat(3, 200px) ; grid-gap: 100px; }
  24. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns : repeat(3, 200px) ; grid-template-rows: 100px 150px; grid-gap: 100px; }
  25. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns : repeat(3, 200px) ; grid-template-rows : 150px; grid-gap: 100px; }
  26. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns : repeat(3, 200px) ; grid-template-rows : 150px; grid-auto-rows: 150px; grid-gap: 100px; }
  27. None
  28. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns : 25% 25% 25% 25%; grid-gap: 100px; }
  29. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns : repeat(3, 100px) ; grid-gap: 100px; }
  30. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 100px; }
  31. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-gap: 100px; }
  32. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div></div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns: auto 2fr 1fr; grid-gap: 100px; }
  33. <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div></div> <div>5</div> <div>6</div> </div> .grid

    { display: grid; grid-template-columns: auto 2fr 1fr; grid-gap: 100px; }
  34. None
  35. <div class="grid"> <div>1</div> <div class="pupper"></div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>

    .grid { display: grid; grid-template-columns : repeat(3, 1fr); grid-gap: 100px; } .pupper { width: 300px; }
  36. <div class="grid"> <div>1</div> <div class="pupper"></div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>

    .grid { display: grid; grid-template-columns : repeat(3, 1fr); grid-gap: 100px; } .pupper { grid-column: span 2; }
  37. <div class="grid"> <div>1</div> <div class="pupper"></div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>

    .grid { display: grid; grid-template-columns : repeat(3, 1fr); grid-gap: 100px; } .pupper { grid-column: span 3; }
  38. <div class="grid"> <div>1</div> <div class="pupper"></div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>

    .grid { display: grid; grid-template-columns : repeat(3, 1fr); grid-gap: 100px; } .pupper { grid-column: span 3; } .grid { display: grid; grid-template-columns : repeat(3, 1fr); grid-gap: 100px; grid-auto-flow: dense; } .pupper { grid-column: span 3; }
  39. <div class="grid"> <div>1</div> <div class="pupper"></div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>

    .grid { display: grid; grid-template-columns : repeat(3, 1fr); grid-gap: 100px; } .pupper { grid-column: span 2; }
  40. <div class="grid"> <div>1</div> <div class="pupper"></div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>

    .grid { display: grid; grid-template-columns : repeat(3, 1fr); grid-gap: 100px; } .pupper { grid-column: span 2; } .grid { display: grid; grid-template-columns : repeat(3, 1fr); grid-gap: 1rem; } .pupper { grid-column: 1 / 3; }
  41. None
  42. <div class="grid"> <div class="sidebar-1">Sidebar #1</div> <div class="content">Doggo ipsum filler </div>

    <div class="sidebar-2">Another sidebar</div> <div class="footer">Footer</div> </div> .grid { display: grid; grid-template-columns : 1fr 3fr 1fr; grid-template-rows : 100px 100px 50px ; grid-gap: 100px; }
  43. <div class="grid"> <div class="sidebar-1">Sidebar #1</div> <div class="content">Doggo ipsum filler </div>

    <div class="sidebar-2">Another sidebar</div> <div class="footer">Footer</div> </div> .grid { display: grid; grid-template-columns : 1fr 3fr 1fr; grid-template-rows : 100px 100px 50px ; grid-gap: 100px; grid-template-areas: “sidebar-1 content sidebar-2” “sidebar-1 content sidebar-2” “footer footer footer”; }
  44. <div class="grid"> <div class="sidebar-1">Sidebar #1</div> <div class="content">Doggo ipsum filler </div>

    <div class="sidebar-2">Another sidebar</div> <div class="footer">Footer</div> </div> .grid { display: grid; grid-template-columns : 1fr 3fr 1fr; grid-template-rows : 100px 100px 50px ; grid-gap: 100px; grid-template-areas: “sidebar-1 content sidebar-2” “sidebar-1 content sidebar-2” “footer footer footer” ; } .sidebar-1 { grid-area: sidebar-1; } .content { grid-area: content; } .sidebar-2 { grid-area: sidebar-2; } .footer { grid-area: footer; }
  45. <div class="grid"> <div class="sidebar-1">Sidebar #1</div> <div class="content">Doggo ipsum filler </div>

    <div class="sidebar-2">Another sidebar</div> <div class="footer">Footer</div> </div> .grid { display: grid; grid-template-columns : 1fr 3fr 1fr; grid-template-rows : 100px 100px 50px ; grid-gap: 100px; grid-template-areas: “sidebar-1 content sidebar-2” “sidebar-1 content sidebar-2” “footer footer footer” ; } .sidebar-1 { grid-area: sidebar-1; } .content { grid-area: content; } .sidebar-2 { grid-area: sidebar-2; } .footer { grid-area: footer; }
  46. None
  47. One-dimensional → either column OR row Content-first Great for components

    and small-scale layouts Two-dimensional → both columns AND rows Layout-first Intended for larger scale layouts
  48. None
  49. None
  50. None
  51. None
  52. None
  53. • Wes Bos’ CSS Grid • CSS Grid Garden •

    My article on CSS Grid (dev.to/karaluton) • Info on fallbacks for IE: CSS Grid + Autoprefixer • Grid by Example • Flexbox vs CSS Grid • W3 • Ken Bellows - Why We Need CSS Subgrid
  54. None