Responsive Web Design

1
 Outline

1. Flexbox

2. Grid

3. Media Queries

4. Common Layout Patterns

2
 Responsive Web Design (RWD)
• RWD is an approach to serve different layouts for
different screen sizes
o Optimize the viewing experience on range of devices:
mobile, desktop, tablet, TV…
o Can be accomplished using CSS grid/flexbox & media
queries
o Mobile-first layouts work well on all screen widths: start with single
column layout for smaller screens

3
3
4
 Flexbox
• The Flexbox provide an efficient way to lay out, align
and distribute space among items in a container
o Defines one-dimensional layout
o A flex container stretches items to fill available free space
or shrinks them to prevent overflow
.flex-container {
display: flex; Container Items
gap: 1rem;
justify-content: center;
}

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

https://www.w3schools.com/css/css3_flexbox.asp
5
 Flex Container Properties
• flex-direction: either row (default) or column
• flex-wrap: nowrap (default) all flex items will be
on 1 line. Assign wrap to allow flex items to
wrap onto multiple lines
• justify-content: aligns and arranges flex-items
along the main axis
• align-items: aligns items within a flex line, along
the cross-axis
• align-content: aligns and manages spacing
between multiple lines when items wrap
6
row (default):
horizontal
alignment

column: vertical alignment

7
• nowrap (default): all flex items will be on one line
• wrap: flex items will wrap onto multiple lines

8
justify-content

• Align items and

distribute extra leftover
space along the main
axis
• start is the default: items
are packed toward the
start

9
align-items

• Aligns items within a

flex line, along the
cross-axis

• stretch is the default:

flex items stretch to fill
the flex line

10
align-content

• Aligns and distributes

extra leftover free
space between the
lines when items
wrap
• stretch is the default:
lines stretch to fill
the container

11
flex items - order & flex-basis
order: changes the
display order of the flex
item

flex-basis: defines the

flex item default size
before remaining space is
distributed. It accepts:
• specific values : pixels, rem, %
• auto: defaults to width or height
property
• content : automatic sizing based on
its content 12
flex items - grow & shrink

flex-grow: determines
how the flex item is
allowed to grow

flex-shrink: allows
an item to shrink if
necessary

13
 flex items - align-self
• align-self: overrides default alignment (or the one
specified by align-items) for a specific item along the
Cross Axis

14
15
 CSS Grid
• CSS Grid is a two-dimensional layout system to
design the page layout
• Can specify columns/rows
template
• Grid elements can be auto-placed
or explicitly placed using grid lines
or grid areas
• Easy control of space distribution
and alignment of items
16
 Grid container & Grid items
• Grid container is .page {
defined by setting the display: grid;
}
display property of
the container <div class="page">

element to grid
<header class="head">
</header>

<main class="main-content">

• Grid item = Element

</main>

<aside class="sidebar">
that is a direct </aside>

descendant of the <footer class="footer">

</footer>

grid container
</div>

17
 Grid Template Columns
1 2 3 4
grid-template-columns:
2fr 1fr 1fr;

Defines grid columns and

their desired size (em, px,
%, fr)

18
 Grid rows
1 2 3 4
grid-template-rows: 1

auto 1fr 3fr;

2
- Defines grid rows and
their desired size (em, 3

px, %, fr)
- Optional, only define it
when really needed

4
19
grid-template-rows & grid-template-columns

https://devopedia.org/css-grid-layout 20
grid-gap
.page {
display: grid;
grid-gap: .5rem;
}
Defines space (i.e., gutter) between
grid tracks (as shown in blue)

grid-auto-flow
Defines how to automatically
place grid items that aren't
explicitly placed
(row if the default)
21
 Placing Items using Grid Lines
Start at column line 2 End at column line 4

.head {
1 2 3 4
grid-column: 2/4; 1
w line 1
Start at ro

grid-row: 1/2;
End a
} t row
line
2
2

grid-column: 2/4; 3
Or grid-column: 2/ span 2;

Place item in the grid using 4

the start and end grid lines
grid-column: 1 / -1
for columns and rows => spans all available columns
22
 Grid line
• Horizontal (row) or
vertical (column) line
separating the grid
into sections

• Grid lines are

referenced by
numbers, starting and
ending with the outer
borders of the grid
23
 Example - Placing Items using Grid Lines
.container {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr auto;
}

header {
grid-column: 1 / span 3;
}

.left-side {
grid-column: 1 / 2;
}

main {
grid-column: 2 / 3;
}

.right-side {
grid-column: 3 / 4;
}

footer {
grid-column: 1 / span 3;
}
24
 Placing Items
using Grid areas
grid-template-areas
is used to define named grid areas

Then place items in the grid areas

header {
grid-area: header;
}
.left-side {
.container { grid-area: left-side;
display: grid; }
grid-template: auto 1fr auto main {
/ auto 1fr auto; grid-area: main;
}
grid-template-areas: .right-side {
"header header header" grid-area: right-side;
}
"left-side main right-side"
"footer footer footer"; footer {
grid-area: footer;
} } 25
 Grid areas
• Defining grid areas and using them to place elements is
best way to design the page layout as it allows direct
translation of the paper-based design to a CSS grid

26
• justify-items
defines alignment along
the row axis

• align-items
defines alignment along
the column axis

27
• justify-content
justifies all grid content
on row axis (if container has
extra space)

• align-content
justifies all grid content
on column axis (if container
has extra space)

28
• justify-self
• aligns an item inside a
single cell along the row
axis

• align-self
• aligns an item inside a
single cell along the
column axis

29
 Grid vs Flexbox
• Grid allows defining a two-dimensional layout with
columns and rows, unlike flexbox which is a one-
dimensional layout (either in a column or a row).
• In practice you combine these layout models. Often you can
use a Flexbox container inside a Grid container
o Grid is often used for the overall page layout (i.e., Macro layouts
describing the larger, page-wide organization) while the flexbox is
used for small-scale one-dimensional layouts (e.g., menu or card
layout)

30
Media Queries

31
 Responsive page layout using Media Queries
Use media queries to define
layouts for different screen sizes

@media screen and (min-width: 700px) {

.page {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas: "title title"
"main header"
"main sidebar"
"footer footer";
}
}

• This example applies two-

column layout once the
screen width is above a
specified breakpoint
• Media queries allows
defining layouts for different
screen sizes
32
 Common breakpoints

Source: https://kinsta.com/blog/responsive-web-design/
33
Common Layout Patterns
https://web.dev/patterns/layout/
Watch explanation in this video

34
 Menu using a flexbox
• A website menu could be created using a ul
element with display: flex

nav ul {
<nav> width: 90%;
<ul> display: flex;
<li><a href="#">Home</a></li> column-gap: 1rem;
<li><a href="#">About</a></li> row-gap: 0.4rem;
<li><a href="#">Contact us</a></li> flex-wrap: wrap;
</ul> }
</nav> nav ul li {
list-style: none;
}

35
 Line-up card
justify-content: space-between
• Flexbox column card with justify-content:
space-between
o places the first and last child elements (e.g., title
and image) at the edges of the flex container
o the remaining space evenly distributed between
the elements
• e.g., the descriptive text in between gets placed with equal
spacing to each edge

36
 Aspect ratio Image Card
aspect-ratio: <width> / <height>

• Maintains the aspect ratio of an image in a card,

while resizing the card.
• With the aspect-ratio property, as you resize the
card, the image maintains the desired aspect ratio
o e.g., maintains 16 x 9 aspect ratio as you resize the card

.card img {
aspect-ratio: 16 / 9;
}

37
 Clamping card
clamp(<min>, <actual>, <max>)

• Sets an absolute min and max size, and an actual

size for the card
.card {
width: clamp(23ch, 40%, 46ch);
}

• Min size is 23 characters, max size is 46ch, actual

size is 40% of the parent width
o Width of the card increases to the max size and decreases
to its min size as the parent stretches and shrinks
o Enables more legible layouts, as the text won't be too wide
(above 46ch) or too narrow (below 23ch)
38
 Deconstructed pancake
flex: <flex-grow> <flex-shrink> <base-width>

• Create a layout that stretches to fit the available

space and wraps to the next line to maintain a
minimum size (specified in base-width)
• On smaller screens, the boxes would stack nicely
o set the value of <flex-grow> to 1 => flex items grow as
you increase the screen size
o set the value of <flex-shrink> to 1 => flex items shrink
as you decrease the screen size
o when needed boxes wrap to the next line to maintain
the minimum base-width

39
Pancake stack – Header-Main-Footer
grid-template-rows: auto 1fr auto

• Commonly referred to as a sticky footer

grid-template-rows: auto 1fr auto

o auto = auto-sized based on

content
Header and footer are auto-
sized based on their content
o main content area occupies
the remaining space (1fr)

40
 Sidebar & Content
grid-template-columns: minmax(<min>, <max>) 1fr

• A layout where the sidebar is given a minimum

and maximum safe area size, and the rest of the
content fills the available space.
grid-template-columns:
minmax(100px, 20%) 1fr;

• minmax() function is used to set the minimum

sidebar size to 100px, but letting it stretch out to
20% on larger screens
o the main content takes up the rest of the space (1fr)
41
Classic layout – Header-3 Columns-Footer
grid-template: auto 1fr auto / auto 1fr auto
• Classic layout with a header, footer, left sidebar,
right sidebar, and main content area.
• grid-template: auto 1fr auto / auto 1fr auto
rows and columns templates separated by slash
o auto = auto-sized based on content
header, footer and sidebars are auto-sized based on their
content
o main content area occupies the remaining space (1fr)
o grid lines are used for placing the grid items

42
 RAM (Repeat, Auto-fit, Minmax)
grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))
• A responsive layout with auto-created grid columns and
automatically-placed children
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

Browser!
• Use RAM (Repeat-Auto-fit-Minmax)
to create dynamic grid areas
• I want you to auto-create the grid
columns you decide how many you
can fit using the auto-placement
algorithm
• I want the columns to be minimum See posted example
280px and a maximum of sharing the
available space equality among the
columns 43
 Super centered
place-items: center
• Use grid’s place-items: center to center
an element within its parent
o place-items: center is a shorthand that sets
both align-items and justify-items to center

44
 Summary
• Use Grid any ,me you work with two-dimensional
layouts to divide the page into several sec,ons
having different size and posi,on
• Use Flexbox for one-dimensional layout that offers
space alloca,on between items + the ability to
alter its items’ width/height to best fill the
available space
• Use Grid layout and Media Queries (when
needed) for responsive design
• .. mastering CSS needs hands-on pracDce 🧗🏋…

45
 Resources
• Responsive Design Patterns
o https://web.dev/patterns/layout/
o https://web.dev/learn/design/
• Responsive Web Design Code Camp
o https://www.freecodecamp.org/learn/responsive-web-design/
• Flexbox
o https://css-tricks.com/snippets/css/a-guide-to-flexbox/
o https://marina-ferreira.github.io/tutorials/css/flexbox/

• CSS Grid
o https://1linelayouts.glitch.me/
o https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
o https://gridbyexample.com/learn/
o https://css-tricks.com/snippets/css/complete-guide-grid/
46