This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Flexbox and CSS Grid Exercise 2 Solution" Lesson
[00:00:00]
>> Jen Kramer: So my solution looked like this. So this is the, I took the history page, I renamed it gallery.html. I deleted the content that was there on the page. And replaced it. So after the nav bar, I added a div with a class of gallery. The history page, it was a div with a class of content.
[00:00:19] So, I've just changed that class name. And then we’ve got our H2 introducing the content. Followed by that long list with all the figures in it that we had before. Blah, blah, blah. And then it goes all way down to the footer down here on the bottom. So, that’s the html.
[00:00:38] In the CSS, notably what I did here was around line 62-63. This had been a style that had been for the content only before, I added the gallery class to that, because I wanted that same background color, the same radius, the same padding associated with that. And then after that I added my Flexbox based gallery styles.
[00:01:01] Same kind of way that I did before from the FlexGrid/flexbox. Gallery layout exercise that we did as part of the wrapup from yesterday. So gallery UL, gallery LI, and the gallery image. So that's all of that particular content there. And then in terms of everything else in the media queries, I don't think I actually did too much there.
[00:01:27] I changed some of the layout a little bit with the content, well, that was for the history page. We don't have a content class on this particular page. So that was pretty much it. I kept it really super simple for this image gallery page. So are there any questions on this particular exercise?
[00:01:51]
>> Jen Kramer: This is really a notable exercise, because this is sort of the layout of the future. We have grid laying out the structure of the web page, we have Flexbox controlling all of these UI elements in the middle of it. In this case, it happened to be an image gallery.
[00:02:06] I'm sure that you have enough imagination to think these could have been cards coming out of bootstrap, or they could have been little blurbs of some kind or another. Some other kind of little box, a whole bunch of them being served up on the page. And so Flexbox is a great way to handle those and display those on the page.
[00:02:26] Now, you could have done that with a nested grid as well. You can absolutely do it with a nested grid laying out that content as well. The advantage that Flexbox has here is that we can have as many of these as we want, we don't have to worry about any kind of repeated sorts of layouts.
[00:02:45] And the other thing to remember is that grid is designed to work in two dimensions while Flexbox is designed to work in one. If you have a whole bunch of these images, they are essentially the same. They have the same kind of treatment over and over again. And they're just wrapping onto another line.
[00:03:00] Then Flexbox is a perfectly adequate way to make this work. You don't need to go to a grid system where we're specifying both columns and rows to lay something out on the page.