Check out a free preview of the full CSS Grid & Flexbox for Responsive Layouts, v2 course

The "Flexbox Grid System Exercise" Lesson is part of the full, CSS Grid & Flexbox for Responsive Layouts, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to use the Flexbox grid system to complete the CodePen exercise by placing all five figures on the same row with a 2% gap between each box and If the window is less than 850px, have 3 boxes on one row and 2 boxes on the second row while maintaining the 2% gap between each box in the first row.

Preview
Close

Transcript from the "Flexbox Grid System Exercise" Lesson

[00:00:00]
>> Now based a little bit on the Flexbox that we've been talking about all morning and the the challenges that you faced at this point in time here inside of your notes. Part 2C, you try it. So, we have a different pattern this time. Okay, here's these five boxes.

[00:00:19]
And I've spelled out the challenge down here in the JavaScript section because I'm not using it. I put it in as a big comment. And it says here, so you wanna put all five figures on the same row with a 2% gap in between each box, okay? And then if the window is less than 850, you have three boxes on one row and two on the second.

[00:00:38]
So let me show you what the end state of this is gonna look like. So what I want you to do is build this. Here's five boxes on one row, there they are. Okay, and when we go to a smaller dimension, I want you to try to get it to look like this.

[00:00:54]
Wow, so three boxes across the top, these two underneath, look how they line up in between the grids here in this particular layout

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now