1
Define Root Colors Variables and Set up Box-Sizing for a CSS Layout
1m 8s
2
Introduction to CSS Grid Rows and Columns with display: grid
1m 23s
3
Specify a Gutter in CSS Grid with gap (grid-gap)
1m 3s
4
Utilize Firefox Developer Tools to Visualize CSS Grid Styles
47s
5
Determine CSS Grid Sizing with the Fraction Unit (fr)
3m 6s
6
Define a Page Layout with CSS Grid Using grid-template-areas
5m 15s
7
Align Content by Adding Styling to a CSS Grid Layout
1m 46s
8
Build a Navigation Bar with CSS Grid Using grid-auto-flow
1m 24s
9
Create a Nested CSS Grid Layout
1m 38s
10
Use the repeat() CSS Function to Efficiently Define CSS Grid Rows and Columns
49s
11
Define Size Range with the minmax() CSS Function to Create Responsive Grid Items
1m 18s
12
Create a Responsive Layout Using Media Queries with CSS Grid
1m 30s
13
Use grid-auto-flow and Media Queries to Flip Navigation from Horizontal to Vertical
1m 23s

Align Content by Adding Styling to a CSS Grid Layout

Share this video with your friends

One thing you can't escape when styling is centering content. It's going to happen even if you use CSS Grid!

We can define grids within grids, which will allow us to align our items within an area. We'll use align-items and justify-items to get this done!

Lesson Challenge

Which axis does "justify" refer to? What is the keyword that refers to vertical position?

Align Content by Adding Styling to a CSS Grid Layout

Share this video with your friends

Lesson Challenge

Course

Build Modern Layouts with CSS Grid