CSS: Combining Grid and Flexbox

Course details

With Grid and Flexbox, CSS is changing dramatically. Whereas in the past, creating complex layouts required all sorts of CSS hacks, JavaScript, or both, now you can use Flexbox and Grid—tools designed specifically for layouts—to create responsive web pages with precise, custom layouts. In this course, Emily Kay covers the basics of Flexbox and Grid separately, from syntaxes to properties to how they work in general. After that, she details instances where you may need to use both to accomplish your layout goals. As Emily shows, when you use Flexbox and Grid together to combine their separate strengths, you can create and display complex web content in a beautiful, user-friendly way.

Concepts

0. Introduction

01 - Custom web layouts with Grid and Flexbox
02 - Using the exercise files
03 - What you should know
04 - Using development tools

1. What Is Flex

05 - What is Flexbox
06 - Flexbox syntax
07 - Flexbox container properties
08 - Flexbox item properties
09 - Using Flexbox - Challenge
10 - Using Flexbox - Solution

2. What is Grid

11 - What is Grid
12 - Grid syntax
13 - How does Grid work
14 - Grid container properties
15 - Grid item properties
16 - Functions and keywords
17 - Using Grid - Challenge
18 - Using Grid - Solution

3. Combining Technologies

19 - Grid vs. Flexbox
20 - Combining Flexbox and Grid
21 - Analyzing a layout
22 - Choosing the right solution for the job
23 - Using Grid and Flexbox - Challenge
24 - Using Grid and Flexbox - Solution

4. Build a Webpage Using Flexbox and Grid

25 - Overview of the project
26 - Webpage header with hero section
27 - Create a hamburger menu for mobile
28 - Create a horizontal menu for desktops
29 - Web cards, part 1
30 - Web cards, part 2
31 - CTA summaries
32 - Team section for mobile
33 - Team section for desktops
34 - Problem section
35 - Media objects for mobile
36 - Media objects for desktop
37 - Picture gallery
38 - Footer for large screen
39 - Footer for extra large screens

5. Build a Form Using Flexbox and Grid

40 - Overview of project
41 - Form for mobile
42 - Form for desktops

6. Support

43 - Compatibility and resources
44 - Feature queries

Conclusion

45 - Next steps