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

Utilize Firefox Developer Tools to Visualize CSS Grid Styles

Share this video with your friends

For this lesson, you will need to install Firefox Browser Developer Edition to use the CSS Grid dev tools available within the browser.

Once installed, you can right-click on your HTML page, hit inspect, and look over to the right side of the tools. There is a grid section that you can open that will let you visualize your CSS Grid in a helpful way as you continue developing your app. This is great for troubleshooting if you don't know why your grid is misaligned.

Utilize Firefox Developer Tools to Visualize CSS Grid Styles

Share this video with your friends

Course

Build Modern Layouts with CSS Grid