This document provides an overview of different CSS layout models including flexbox and CSS grids. It discusses when each model should be used such as controlling elements along rows and columns or defining template areas for page layouts. Resources for learning more are provided, including following experts like Jen Simmons and reading specifications on the W3C website or guides on CSS Tricks. In the end, the document confirms that browsers do support these CSS layout models.

1. Better Layouts with
Flexbox + CSS Grids

2. Hello!I am Sam Provenza (she/her)
2

3. 3
www.tailwindapp.com/careers

4. CSS Layout Modes
4
Block
Inline-block
Positioning
Table

5. 5
.example {
display: block;
}

6. 6
.example {
display: inline-block;
}

7. 7
.parent {
position: relative;
}
.child {
position: absolute;
}

8. 8
.example {
display: table;
}

9. 9
Floats
...that’s it

10. CSS Layout Modes
10
Block
Inline-block
Positioning
Table
Flexbox
CSS Grid

11. Flexbox
11
.example {
display: flex;
}

12. Terminology
12

13. Flex Container
display: flex
flex-direction:
flex-wrap:
flex-flow:
justify-content:
align-items:
Properties
Flex Items
Order:
flex:
flex-grow:
flex-shrink:
flex-basis:
align-self:
13

14. When to use Flexbox
- Control elements along a row or column axis
14

15. 15
.parent {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}

16. 16
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}

17. When to use Flexbox
- Control elements along a row or column axis
17
- Change source order of elements

18. 18
.parent {
display: flex;
flex-direction: column;
}

19. 19
.parent {
display: flex;
flex-direction: column;
}
.image {
order: -1;
}

20. When to use Flexbox
- Control elements along a row or column axis
20
- Change source order of elements
- Distribute space among elements automatically

21. 21

22. 22
.parent {
display: flex;
flex-direction: row;
}
.home-button {
flex-grow: 2;
}

23. When to use Flexbox
- Control elements along a row or column axis
23
- Change source order of elements
- Distribute space among elements automatically
- Horizontal and Vertical centering

24. 24
.parent {
display: flex;
justify-content: center;
align-items: center;
}

25. Recap:
- Control elements along a row or column axis
25
- Change source order of elements
- Distribute space among elements automatically
- Horizontal and Vertical centering

26. http://www.samserif.co

27. https://bashooka.com

28. https://bashooka.com

29. CSS Grid
29
.example {
display: grid;
}

30. Terminology
30

31. Grid Container:
display
grid-template-columns
grid-template-rows
grid-template-areas
grid-gap
justify-items
align-items
place-items
justify-content
align-content
place-content
grid-auto-flow
grid
Properties
Grid Items
grid-column
grid-row
grid-area
justify-self
align-self
place-self
31

32. When to use Grid
- Control elements along rows AND columns
32

33. 33

34. 34
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 200px);
grid-gap: 10px;
}

35. 35
.box1 {
grid-column: 1/3;
grid-row: auto;
}

36. When to use Grid
- Control elements along rows AND columns
36
- Elements need to occupy same space or overlap

37. 37

38. 38
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 200px);
grid-gap: 10px;
}

39. 39
.box1 {
grid-column: 1/3;
grid-row: 1;
}
.box2 {
grid-column: 2/4;
grid-row: 1/span last-line;
z-index: 2;
}
.box3 {
grid-column: 3/5;
grid-row: 2/span last-line;
z-index: 3;
}

40. When to use Grid
- Control elements along rows AND columns
40
- Elements need to occupy same space or overlap
- Defining template areas for a full page layout

41. 41

42. 42
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}

43. 43
.box1 {
grid-area: header;
}
.box2 {
grid-area: main;
}
.box3 {
grid-area: sidebar;
}
.box4 {
grid-area: footer;
}

44. Recap:
- Control elements along rows AND columns
44
- Elements need to occupy same space or overlap
- Defining template areas for a full page layout

45. http://www.gridexamples.com

46. http://www.gridexamples.com

47. http://www.gridexamples.com

48. ‘’
This seems cool but do
browsers actually
support these CSS
layout models?
48

49. 49
Answer: YES!

50. 50
Answer: YES!

51. ‘’
Where can I go to learn
more?
51

52. Resources
Who to follow if you want to learn more:
▣ Jen Simmons
▣ Rachel Andrew
▣ Wes Bos
Reading Materials
▣ W3 Spec - easy to read
▣ CSS Tricks Guides
52

53. Thanks!
53
Follow me: @samserif