CSS: Combining Grid and Flexbox

Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.

Introduction

• Custom web layouts with Grid and Flexbox
• Using the exercise files
• What you should know
• Using development tools

1. What Is Flex?

• What is Flexbox?
• Flexbox syntax
• Flexbox container properties
• Flexbox item properties
• Using Flexbox: Challenge
• Using Flexbox: Solution

2. What is Grid?

• What is Grid?
• Grid syntax
• How does Grid work?
• Grid container properties
• Grid item properties
• Functions and keywords
• Using Grid: Challenge
• Using Grid: Solution

3. Combining Technologies

• Grid vs. Flexbox
• Combining Flexbox and Grid
• Analyzing a layout
• Choosing the right solution for the job
• Using Grid and Flexbox: Challenge
• Using Grid and Flexbox: Solution

4. Build a Webpage Using Flexbox and Grid

• Overview of the project
• Webpage header with hero section
• Create a hamburger menu for mobile
• Create a horizontal menu for desktops
• Web cards, part 1
• Web cards, part 2
• CTA summaries
• Team section for mobile
• Team section for desktops
• Problem section
• Media objects for mobile
• Media objects for desktop
• Picture gallery
• Footer for large screen
• Footer for extra large screens

5. Build a Form Using Flexbox and Grid

• Overview of project
• Form for mobile
• Form for desktops

6. Support

• Compatibility and resources
• Feature queries

Conclusion

• Next steps