When it comes to building responsive web layouts we’ve used tables, floats and Flexbox. Now there’s CSS Grid. In this talk, we’ll go over what differentiates it from other techniques and why it’s completely changing the game.

1. INTRODUCTION TO
CSS GRID
KARA LUTON
@karaluton

2. ABOUT ME
Will stop to pet any dog I see
Nashville native
Retired ballerina
Former music publicist
Web Developer at Lewis Communications
Co-organizer for Tech Ladies

3. SO WHY GRID?

4. “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.”
Morten Rand-Hendriksen

5. Mobile + tablet
Desktop

6. TERMS YOU SHOULD
KNOW

7. GRID TERMINOLOGY
GRID CONTAINER
The element containing the grid,
defined by setting
display: grid;

8. GRID TERMINOLOGY
GRID ITEM
Any element that is a direct
descendant of the grid container.

9. GRID TERMINOLOGY
GRID LINE
Horizontal (row) or vertical
(column) line separating the grid
into sections.

10. GRID TERMINOLOGY
GRID CELL
The intersection between a
grid-row and a grid-column

11. GRID TERMINOLOGY
GRID AREA
Rectangular area between four
specified grid lines. Can cover
one or more cells.

12. GRID TERMINOLOGY
GRID TRACK
The space between two grid
lines, either horizontal or
vertical.

13. GRID TERMINOLOGY
GRID GAP
The empty space between grid
tracks. Commonly called
gutters.

14. GRID SUPPORT

15. SETTING UP CSS GRID

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

17. <div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.grid {
display: grid;
grid-template-columns: 20rem 20rem 20rem;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 20rem);
}

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

19. IMPLICIT VS
EXPLICIT GRID

20. <div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.grid {
display: grid;
grid-template-columns: 20rem 20rem 20rem;
grid-gap: 1rem;
}
.grid {
display: grid;
grid-template-columns: 20rem 20rem 20rem;
grid-template-rows: 10rem 15rem;
grid-gap: 1rem;
}

21. PIXELS, PERCENTAGES +
FRACTIONAL UNITS

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

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

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

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

26. SIZING +PLACING
GRID ITEMS

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

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

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

30. GRID TEMPLATE AREAS

31. <div class="grid">
<div class="item1">Sidebar #1</div>
<div class="item2">Doggo ipsum filler</div>
<div class="item3">Another sidebar</div>
<div class="footer">Footer</div>
</div>
.grid {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 10rem 10rem 5rem;
grid-gap: 1rem;
}
.grid {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 10rem 10rem 5rem;
grid-gap: 1rem;
grid-template-areas:
“sidebar-1 content sidebar-2”
“sidebar-1 content sidebar-2”
“footer footer footer”;
}

32. <div class="grid">
<div class="item1">Sidebar #1</div>
<div class="item2">Doggo ipsum filler</div>
<div class="item3">Another sidebar</div>
<div class="footer">Footer</div>
</div>
.grid {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 10rem 10rem 5rem;
grid-gap: 1rem;
}
.grid {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 10rem 10rem 5rem;
grid-gap: 1rem;
grid-template-areas:
“sidebar-1 content sidebar-2”
“sidebar-1 content sidebar-2”
“footer footer footer”;
}
.item1 {
grid-template-area: sidebar-1;
}
.item2 {
grid-template-area: content;
}
.item3 {
grid-template-area: sidebar-2;
}
.footer {
grid-template-area: footer;
}

33. DEMO TIME!

34. RESOURCES
● Wes Bos’ CSS Grid
● CSS Grid Garden
● My article on CSS Grid
GRID TUTORIALS
OTHER RESOURCES
● Info on fallbacks for IE: CSS Grid + Autoprefixer
● Grid by Example
WHAT’S NEXT FOR GRID?
● CSS Grid Level 2 Subgrids