Learning Intention:
By the end of this lesson, students will be able to recreate a complex web design using only CSS by effectively applying layout, colours and typography principles.
Success Criteria:
Students can:
- Identify and implement appropriate CSS properties for layout structures such as grids or flexbox.
- Apply correct colour schemes and typographic styles using CSS (or imported CSS) to match the given design.
- Modify CSS rules to adjust spacing, alignment, and font styling for accuracy in design replication.
Let's Get Started with CSS Grid
CSS Grid is a powerful layout system designed for creating two-dimensional layouts on the web. It allows you to define both rows and columns, making it ideal for designing complex layouts where elements need to be arranged in a grid format.
The main components are:
- Grid container: The parent element that defines the grid structure.
- Grid items: The child elements that are placed within the grid.
Key features include:
- Grid template rows and columns: Define the size and number of rows and columns.
- Grid gap: Add spacing between rows and columns.
- Grid areas: Assign grid items to specific areas, creating a clear layout structure.
- Auto-placement: Automatically positions items in available grid cells.
CSS Grid is especially useful when creating layouts like photo galleries, dashboards, or any design where you need precise control over both the horizontal and vertical positioning of elements.
Click on the Tabs below to find out more about some specific parameters for the CSS Grid. Otherwise you can also check out the W3Schools Guide on the CSS Grid here: CSS Grid Layout
This defines the container as a grid and enables the use of grid properties on its children (grid items).
.container {
display: grid
}
These properties define the number of columns and rows, as well as their sizes. You can use various units like pixels (
px
), percentages (
%
), and fractions (
fr
).
-
grid-template-columns: Defines the columns. -
grid-template-rows: Defines the rows.
grid-template-columns: 1fr 2fr 1fr; /* Three columns: 1 fraction, 2 fractions, 1 fraction */
grid-template-rows: 100px auto 100px; /* Three rows: fixed height, auto, fixed height */
}
The above code would create a grid template that splits each row into three parts with the middle part being 2 fractions (Essentially 25%, 50%, 25%). The grid would be set into three rows with the top and bottom row being set to 100px in height and the middle row being set to have its height automatically adjusted based on content.
These properties allow individual items to span across multiple columns or rows. You can define where an item starts and how many columns/rows it spans.
-
grid-column: start / end; -
grid-row: start / end;
This property defines the spacing between rows and columns in the grid. You can specify the gap between rows and columns separately with
row-gap
and
column-gap
.
.container {
gap: 20px; /* Adds a 20px gap between all rows and columns */
row-gap: 10px; /* Adds a 10px gap between rows only */
column-gap: 30px; /* Adds a 30px gap between columns only */
}
You can assign a grid item to a specific area within the grid by defining the row and column start/end positions. This allows you to create more complex layouts.
.item {
grid-area: 1 / 2 / 3 / 4; /* Starts at row 1, column 2 and spans to row 3, column 4 */
}
This property lets you name areas of the grid and assign grid items to those areas. You define a grid template with named areas and then place grid items using
grid-area
.
These properties control how grid items are aligned within their individual grid cells.
-
justify-items: Aligns items horizontally. -
align-items: Aligns items vertically.
.container {
justify-items: center; /* Centers items horizontally */
align-items: start; /* Aligns items to the top */
}
These properties control the alignment of the entire grid within the container when there’s extra space.
-
justify-content: Aligns the grid along the row axis. -
align-content: Aligns the grid along the column axis.
.container {
justify-content: space-between; /* Spreads the grid items evenly across the row axis */
align-content: center; /* Centers the grid along the column axis */
}
The
fr
unit represents a fraction of the available space in the grid container. It’s useful when creating flexible layouts where the available space is distributed between columns or rows.
.container {
grid-template-columns: 1fr 2fr 1fr; /* Columns: 1 fraction, 2 fractions, 1 fraction */
}
These properties automatically define the size of implicitly created rows or columns that weren’t explicitly defined.
.container {
grid-auto-rows: 100px;
grid-auto-columns: 100px;
}
Now for some hands on:
Let’s quickly play a game that requires you to modify elements using CSS.
You will need to register to the site, but that’s so that we can practice with a number of games.
The game can be found here: Grid Garden (by CodePip)
The Basic Grid Activity
Download the two files required for the from the Unit 1 GitHub Repository. You will need CSSChallenge1.html and CSSChallenge1.CSS. There is also a completed file available if you require it for review.
Initially, the HTML file will be styled to look like it does below. There are 5 sections, each with a different colour set as their background (with a foreground colour set to the same.
Once you have both files, modify only the CSS file with some styling of the CSS Grid, the final output needs to look like the image below.
Let's Keep Going With Flexbox
CSS Flexbox is a layout model that allows you to create flexible and responsive web layouts. It organizes elements within a container, making it easier to align, distribute, and size them, even when their sizes are unknown or dynamic.
The Flexbox model consists of a flex container and flex items. The container can expand or shrink its items to fit the available space, whether on mobile or desktop screens.
Key features include:
- Flex direction: You can arrange items in rows or columns.
- Justify content: Align items horizontally (e.g., left, right, center).
- Align items: Align items vertically.
- Flex-grow and flex-shrink: Control how items grow or shrink to fill the container.
Flexbox is great for building layouts where you want items to adjust their size and position dynamically, such as navigation menus, card layouts, and more.
Click on the Tabs below to find out more about some specific parameters for the CSS Flexbox. Otherwise you can also check out the W3Schools Guide on the CSS Flexbox here: CSS Flexbox.
This defines the container as a flex container, enabling flex properties for its children (flex items).
.container {
display: flex;
}
This property defines the direction in which the flex items are placed inside the container. The default direction is
row
.
Values:
-
row(default): Aligns items horizontally, from left to right. -
row-reverse: Aligns items horizontally, from right to left. -
column: Aligns items vertically, from top to bottom. -
column-reverse: Aligns items vertically, from bottom to top.
.container {
flex-direction: row; /* Aligns items in a row */
}
This property defines how flex items are aligned along the main axis (horizontal in
row
or vertical in
column
).
Values:
-
flex-start: Aligns items to the start of the main axis. -
flex-end: Aligns items to the end of the main axis. -
center: Centers items along the main axis. -
space-between: Distributes items evenly, with space between them. -
space-around: Distributes items with space around them. -
space-evenly: Distributes items with equal space between and around them.
This property defines how flex items are aligned along the cross axis (perpendicular to the main axis).
Values:
-
stretch(default): Stretches items to fill the container. -
flex-start: Aligns items to the start of the cross axis. -
flex-end: Aligns items to the end of the cross axis. -
center: Centers items along the cross axis. -
baseline: Aligns items along their text baselines.
.container {
align-items: center; /* Centers items vertically */
}
This property defines how multiple lines of flex items are aligned along the cross axis when there is extra space in the flex container. It only affects multi-line flex containers (when
flex-wrap
is used).
Values:
-
flex-start: Aligns lines to the start of the cross axis. -
flex-end: Aligns lines to the end of the cross axis. -
center: Centers lines in the flex container. -
space-between: Distributes lines with equal space between them. -
space-around: Distributes lines with space around them. -
stretch: Stretches lines to fill the container.
.container {
align-content: space-around; /* Distributes lines with space around them */
}
This property controls whether flex items are forced into a single line or can wrap onto multiple lines.
Values:
-
nowrap(default): All items are on one line. -
wrap: Flex items will wrap onto multiple lines, from top to bottom. -
wrap-reverse: Flex items will wrap onto multiple lines, from bottom to top.
These three properties control how flex items grow, shrink, or have their base size set.
-
flex-grow: Defines how much an item can grow relative to the other flex items. -
flex-shrink: Defines how much an item can shrink relative to the other flex items. -
flex-basis: Defines the default size of an item before any remaining space is distributed.
This property defines the order in which flex items appear. Items with lower
order
values will appear first. The default value is
0
.
.item {
order: 1; /* This item will appear after items with an order of 0 */
}
This property allows individual flex items to override the
align-items
property and align themselves differently along the cross axis.
Values:
-
auto(default): Inherits the alignment from the container’salign-itemsproperty. -
flex-start: Aligns the item to the start of the cross axis. -
flex-end: Aligns the item to the end of the cross axis. -
center: Centers the item along the cross axis. -
baseline: Aligns the item along its text baseline. -
stretch: Stretches the item to fill the container.
This is a shorthand property that combines
flex-grow
,
flex-shrink
, and
flex-basis
.
Basically, this one allows is to show the grow, shrink and basis properties in one styling attribute.
The syntax looks like this:
.item {
flex: <flex-grow> <flex-shrink> <flex-basis>;
}
Now for some hands on:
Let’s quickly play a game that requires you to modify elements using CSS.
You will need to register to the site, but that’s so that we can practice with a number of games.
The game can be found here: Flexbox Froggy (by CodePip)
The Basic Flexbox Activity
Alright, so very similiar to the activity you completed above, you will need to make the initial files that can be found in the Unit 1 GitHub Repository look like the final output below. You will need the following files: CSSChallenge2.html and CSSChallenge2.css.
Initial styling:
Expected final styling:
