Join Jen Kramer for an in-depth discussion in this video Solution: Create a grid, part of Learning Foundation 6.
- [Instructor] So how'd you do with the challenge?…As you can see here this is the way I styled…my particular page,…and as I mentioned before in the challenge,…there's definitely a lot more work to do…in terms of making this pretty,…and I'm going to cover a lot of that in the next chapter.…But for right now let's just worry about…the broad layout of this particular page.…So here's the way I went about doing it.…If you take a look at the index.html file,…that you'll find inside of the exercise files…for this particular video,…you'll see here this is the way I put this together.…
So I started up here at line 12,…I put this in a grid container.…So there is a max width associated…with this particular webpage,…and then I set this up in a series of rows.…My first row starts here on line 13,…and I've given this an X orientation,…and it contains two cells.…One of which is going to be seven columns wide,…the other one is five columns wide…down here on line 34.…And the first cell here at line 14,…is going to contain the link here to the image,…
- Working with the XY Grid system
- Adjusting margins and padding
- Block versus vertical grids
- Overriding CSS
- Including cards and callouts
- Customizing the navigation, including dropdown and drilldown menus
Skill Level Beginner
Building a Responsive Single-Page Design with Sasswith Ray Villalobos4h 55m Intermediate
Responsive CSS Workflow with Sass, Bourbon, and Susywith Carrie Dils2h 59m Intermediate
1. Overview of Foundation 6
2. The XY Grid System
3. CSS Overview
4. Navigation Systems
Next steps1m 33s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.