CSS layout

CSS layout

Link1 Link2 Link3

Intro: content plus sidebar

Sidebar
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Flexbox layout

Flexbox example: flex-direction

Text without span Text inside span Link

Property: flex-direction

flex-direction:
row
1 2 3
row-reverse
1 2 3
column
1 2 3
column-reverse
1 2 3

Flexbox example: justify-content

Text without span Text inside span Link

Flexbox example: gap

Text without span Text inside span Link

Property: justify-content

justify-content:
flex-start
flex-end
center
space-between
space-around
space-evenly

Flexbox example: align-items

Text without span Text inside span Link

Flexbox example: align-self

Text without span Text inside span Link

Property: align-items

align-items:
stretch
center
flex-start
flex-end
baseline
how are you

Property: flex-wrap

flex-wrap:
nowrap (automatic width)
1 2 3 4 5 6
nowrap (fixed width)
1 2 3 4 5 6
wrap (automatic width)
1 2 3 4 5 6
wrap (fixed width)
1 2 3 4 5 6
wrap-reverse (automatic width)
1 2 3 4 5 6
wrap-reverse (fixed width)
1 2 3 4 5 6

Property: align-content

align-content:
stretch
center
flex-start
flex-end
space-between
space-around
space-evenly

Properties: gaps

flex-direction: row
(no gap)
column-gap: 0.5rem
row-gap: 0.5rem
gap: 0.5rem
flex-direction: column
(no gap)
column-gap: 0.5rem
row-gap: 0.5rem
gap: 0.5rem

Grid layout

Grid layout result

header
left bar
content
right bar
footer

Defining the grid

3.5rem
1fr
3.5rem
1.5rem
1fr
1.5rem

Placing grid items

1
2
3
4
1
2
3
4
header
left bar
content
right bar
footer

min-content vs. max-content

Content that can become narrower
min-content
max-content
This is the content.
This is the content.
Content that cannot become narrower
min-content
max-content
Disproportionately
Disproportionately

Property: grid-auto-flow

grid-auto-flow:
row
1
2
3
4
5
6
7
column
1
2
3
4
5
6
7

Property: justify-items

justify-items:
start
end
center
stretch

Property: align-items

align-items:
start
end
center
stretch
baseline
Piggy
anon
muse
QUIRK

Property: justify-content

justify-content:
start
end
center
space-around
space-between
space-evenly

Property: align-content

align-content:
start
end
center
space-around
space-between
space-evenly

Properties: gaps

column-gap, row-gap, gap:
(no gap)
column-gap: 0.5rem
row-gap: 0.5rem
gap: 0.5rem

Layout examples

Centering content horizontally and vertically

Centered

A row of inlines with gaps

Home | About | Follow | Archive

A column of blocks with gaps

A
B
C

A row of blocks that wraps

A
B
C
D
E

Aligning labels and text fields

Container queries

Container query: simple sidebar

width: 20rem
Home
About
Archive
Contact
This is the content.
width: 10rem
Home
About
Archive
Contact
This is the content.

Container query: responsive sidebar

1
2
3
4
5
6
7

This is the content.

It contains multiple paragraphs.

They wrap automatically.

1
2
3
4
5
6
7

This is the content.

It contains multiple paragraphs.

They wrap automatically.

1
2
3
4
5
6
7

This is the content.

It contains multiple paragraphs.

They wrap automatically.

Container query: contact card

E. Scrooge
The hard-working boss of our company. Profits matter!
E. Scrooge
The hard-working boss of our company. Profits matter!
E. Scrooge
The hard-working boss of our company. Profits matter!