Better Layouts with Flexbox + CSS Grids

Better Layouts with
Flexbox + CSS Grids

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

CSS Layout Modes
4
Block
Inline-block
Positioning
Table

5
.example {
display: block;
}

6
.example {
display: inline-block;
}

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

8
.example {
display: table;
}

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

Flexbox
11
.example {
display: flex;
}

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

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

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

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

When to use Flexbox
17
- Change source order of elements

18
.parent {
display: flex;
}

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

When to use Flexbox
20
- Distribute space among elements automatically

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

When to use Flexbox
23
- Horizontal and Vertical centering

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

Recap:
25
- Horizontal and Vertical centering

CSS Grid
29
.example {
display: grid;
}

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

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

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

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

When to use Grid
36
- Elements need to occupy same space or overlap

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

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;
}

When to use Grid
40
- Defining template areas for a full page layout

42
.parent {
display: grid;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}

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

Recap:
44
- Defining template areas for a full page layout

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

‘’
Where can I go to learn
more?
51

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

Thanks!
53
Follow me: @samserif

Better Layouts with Flexbox + CSS Grids

More Related Content

What's hot

Similar to Better Layouts with Flexbox + CSS Grids

Recently uploaded

Better Layouts with Flexbox + CSS Grids