Today I spoke at In Control in Orlando on CSS3 Layout. For a decade we’ve been using floats for creating CSS layouts, and while they’re still the best choice for creating most multi-column designs, we’ve all been frustrated by their quirks and limitations. So in this presentation, I talked about some of the new and exciting CSS layout techniques that are either working right now, right around the corner, or a little ways down the road. I focused on how Grid Layout and Flexible Box Layout (aka Flexbox) will be able to be used in the future to create layouts, but also how to use Flexbox in practical ways as a progressive enhancement technique for the layouts you’re crafting today.
You can view the slides on SlideShare, or download the slides here:
CSS3 Layout Demos
I showed a few examples of how to use Grid Layout and Flexible Box Layout and wanted to share my demo files with you so you could poke around in the code if you like. The last two demos have fallback CSS in place so that they still look fine in other browsers; it was not part of my presentation to do that with the first two demos.
- Grid Layout: media block (view in IE 10)
- Flexbox: re-ordered feature boxes (view in Chrome or Opera)
- Flexbox: single-line, full-width, vertically centered form (view in Chrome or Opera)
- Flexbox: full-width, evenly distributed nav bar (view in Chrome or Opera)
Related resources
Here are several links to related resources, a few of which are in the slides plus many more that were not but which I recommend and think you’ll find useful.
The W3C CSS3 specs I covered
- Flexible Box Layout
- Grid Layout
- Multi-column Layout
- Regions
- Exclusions and Shapes
- Basic Box Model (includes float changes)
Flexible Box Layout
- Browser support
- “Using CSS flexible boxes” by Mozilla Developer Network
- “Flexbox — fast track to layout nirvana?” by Chris Mills for Dev.Opera
- “Responsive Design of the Future with Flexbox” by Ben Gremillion for Treehouse
- ““Old” Flexbox and “New” Flexbox” by Chris Coyier
- “Flexbox syntax for IE 10” by me
- CSS Flexbox Please! syntax testing/visualizer tool by Eiji Kitamura
- flexplorer syntax testing/visualizer tool by Bennett Feely
Grid Layout
- Browser support
- IE 10 CSS3 Grid Layout demo by Microsoft
- “IE10 Platform Preview and CSS Features for Adaptive Layouts” by Chris Jones for IEBlog
- “Giving Content Priority with CSS3 Grid Layout” by Rachel Andrew for 24 ways
- IE 10 grid layout demo by Stu Nicholls
Other CSS3 layout techniques
- “The pro’s guide to CSS layouts” by Peter Gasston for .net Magazine
- “Six CSS Layout Features To Look Forward To” by Divya Manian for Smashing Magazine
- IE 10 Regions demo
- IE 10 Exclusions demo
