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
