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

Use grid-auto-flow and Media Queries to Flip Navigation from Horizontal to Vertical

Share this video with your friends

Media queries (@media) are useful to establish breakpoints in your layout. Breakpoints are dependent on specific characteristics and parameters, such as screen resolution or browser viewport width.

The grid-auto-flow CSS property controls how the auto-placement works, specifying how auto-placed items get inserted in the grid.

We'll use both a media query and grid-auto-flow to flip the navigation from horizontal to vertical.

Use grid-auto-flow and Media Queries to Flip Navigation from Horizontal to Vertical

Share this video with your friends

Course

Build Modern Layouts with CSS Grid