Join Jen Kramer for an in-depth discussion in this video Auto-sized grid cells, part of Learning Foundation 6.
- [Instructor] In this next case,…maybe I'm picky about the width of one of these columns,…but I'm less picky about the widths of the other columns.…Using the auto class, I can let Foundation…do the math for me.…It will figure out how many columns…my declared space occupies,…and then it will divide the remaining space evenly…between whatever columns are set to auto.…So inside of your begin folder for this video,…you'll find a text file.…If you go ahead and open that up,…go ahead and copy just the first row of this,…which is from lines one to five.…
Go ahead and copy that…and then in your grid .html document,…just after line 29 here,…go ahead and paste in that bit of HTML.…And then save your page and open it up in your web browser.…What we're going to do here,…is in this very first column…you'll see that this is occupying four cells.…I then have two additional columns that are left here.…And I've simply declared these as auto width.…And so Foundation is being smart enough here to do the math…and figure out that those are probably at four wide also.…
- 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?
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.