An overview of CSS Grid.

1. CSS Grid
T A B L E L A Y O U T 2 . 0

2. 2

3. 3
Table Layout Grid Frameworks

4. 4
CSS Grid

5. Grid Terminology
5

6. 6
Grid Container
Grid Item Grid Item Grid Item
Grid Item Grid Item Grid Item

7. 7
Grid Line
Grid Track
Grid Cell
Grid Area

8. Grid Container Props
8

9. 9
display: grid;

10. 1 0
grid-template-rows / grid-template-columns
Defines the columns and rows of the grid with a space separated list of value. Values represent track size and can be
a px length, percentage, or fraction of free space. Optional names can be given to the generated lines.
grid-template-columns: 40px 50px 1fr 2fr;
grid-column-gap / grid-row-gap
Defines the space between grid tracks.
grid-column-gap: 10px;
grid-row-gap: 15px;
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
Repeat and minmax functions can also be used for more complex layouts.
grid-template-rows: repeat(4, minmax(20px, 50px) 100px);

11. 1 1
justify-items / align-items
Justify-items aligns a grid items on the row axis, align-items aligns items on the column axis, inside grid cells. Values
can be start, end, center, or stretch (default).
justify-self: start;
justify-self: center;
align-self: end;
align-self: stretch;
justify-content / align-content
Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid
items are sized with non-flexible units like px. Justify-content will align the grid on the row axis and align-content will align
the grid on the column axis. Values can be start, end, center, stretch, space-around, space-between, space-evenly.
justify-content: start;
justify-content: center;
align-content: space-around;
align-content: space-evenly;

12. Grid Item Props
1 2

13. 1 3
grid-column-start / grid-column-end / grid-row-start / grid-row-end
Determines a grid item’s location within the grid by referring to specific grid lines. Value can be a number or name
referring to a grid line, “span <number | name>” to span until specified line is hit, or auto.
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2
grid-row-end: span 2
justify-self / align-self
Justify-self aligns a grid item on the row axis, align-self aligns on the column axis.
Values can be start, end, center, or stretch (default).
justify-self: start;
justify-self: center;
align-self: end;
align-self: stretch;

14. Grid Auto Flow
1 4

15. 1 5
grid-auto-flow
If you have grid items that you don't explicitly place on the grid, the auto-placement algorithm kicks in to automatically
place the items. This property controls how the auto-placement algorithm works. It’s similar to flex-direction but with
one special super power.
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;

16. Grid Areas
1 6

17. 1 7
grid-template-areas / grid-area
Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property.
Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax
itself provides a visualization of the structure of the grid.
.item-a { grid-area: header; }
.item-b { grid-area: main; }
.item-c { grid-area: sidebar; }
.item-d { grid-area: footer; }
.container {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}

18. 1 8

19. 1 9
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}

20. 2 0
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
<div class="container">
<header class="header">Header</header>
<main class="main">Main</main>
<aside class="sidebar">Sidebar</aside>
<footer class="footer">Footer</footer>
</div>

21. 2 1
Table Layout Grid Frameworks CSS Grid

22. Responsive
2 2

23. 2 3

24. 2 4
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 30px;
max-width: 960px;
margin: 0 auto 30px;
}

25. 2 5
.container {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"header header"
"main main”
“sidebar footer”;
@media (——medium-screen) {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
}

26. Animation
2 6

27. 2 7

28. But what about Flex?
2 8

29. 2 9
“The main idea behind the flex layout is to give the container
the ability to alter its items’ width/height (and order) to best
fill the available space (mostly to accommodate to all kind of
display devices and screen sizes).”
— Chris Coyier

30. 3 0
• Flex is one dimensional. Grid is two dimensional.
• A core difference is that Grid’s approach is layout-
first while Flexbox’ approach is content-first.
• If you want to define a layout as a row or a column, that
flexes based on the content inside, then you probably
need flexbox.
• If you want to define a grid and fit content into it in two
dimensions then you probably need grid.

31. But what about Table?
3 1

32. 3 2
Still use tables
…but for tables

33. 3 3
Demo time…
CODEPEN