Join Jen Kramer for an in-depth discussion in this video Nested grids, part of Learning Foundation 5.
…So, the next thing I'm going to talk about are Nested Grid Systems.…And the best way to explain what these are is…to show an example where they're really going to be necessary.…So, to do this I've given you a new starting HTML file.…And that is in your exercise files folder.…If you open that up, go to chapter two, video number six in the start folder.…You'll find a file here called nested-grid.html.…Go on ahead and copy that in to your foundation folder.…And then you can open up nested-grid.html inside of Sublime text, and if you just…take a quick peek at the code here, what you'll see is we have a single row here.…
Inside of that are four columns.…These are all small three columns, and you'll see that three of…them have images and one of them has a block of text.…And if you look at that in the browser, this is the way it happens to look.…What I like to do is add another three…images to this particular portion of a web page.…So I'm going to go ahead and do that now.…The easiest way to do this is just to take the row that we have and I'm just…
- Downloading and installing Foundation 5
- Introducing grids
- Centering columns
- Nesting grids
- Styling text, lists, buttons, panels, and more
- Adding navigation bars and dropdown menus
- Creating a responsive lightbox
- Adding an image carousel
- Integrating responsive images
- Adding tooltips
Skill Level Beginner
1. Overview of Foundation 5
2. The Grid System in Foundation
3. CSS Overview
4. Navigation Systems
Next steps1m 24s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.