by
Lessons:15Length:1.4 hours

7.2 Styling the Grid

In this lesson, you will use Flexbox to style your image grid. Here, you will be using the flex property to determine the size of each of your images.

Relevant Links

1.Introduction
1 lesson, 00:39

Free Lesson
1.1
Introduction
00:39

2.Project 1: Flexbox Menu
2 lessons, 11:59

Free Lesson
2.1
Basic Menu Styles
03:56

2.2
Styling the Flexbox Menu
08:03

3.Project 2: Complex Layouts
2 lessons, 12:16

3.1
Flexbox for Page Layout
06:44

3.2
Nested Flexible Boxes
05:32

4.Project 3: Banner With Centered Content
1 lesson, 07:25

4.1
Vertically and Horizontally Centered
07:25

5.Project 4: Ordered Content
1 lesson, 05:23

5.1
Changing the Order
05:23

6.Project 5: Image Grid
2 lessons, 10:03

6.1
Basic Styles
05:00

6.2
Using Flexbox to Finish the Layout
05:03

7.Project 6: Uneven Image Grids
2 lessons, 12:39

7.1
Basic Image Styles
05:05

7.2
Styling the Grid
07:34

8.Bonus Project 1: Flexbox Modal
2 lessons, 11:58

8.1
Building the Flexbox Modal
04:46

8.2
Flexbox Modal Functionality
07:12

9.Bonus Project 2: Flexbox Content Slider
1 lesson, 12:49

9.1
Building the Slider
12:49

10.Conclusion
1 lesson, 00:38

10.1
Final Thoughts
00:38