Look at the difference in these 2 rows below. Multiple methods to nest columns makes it easy to acheive different responsive behavior as needed.
Do you suffer from rigid grid syndrome? Wish your grids were a little more pliant? The key active ingredient in Fluid Fixed Grid Grids is MQ (a.k.a media queries). Apply MQ to your grids today!
Have you tried responsive grids before? Did you run into issues where your ‘responsive’ grids weren’t responsive enough? Have you had a bad experience with a grid system that was afflicted with ’grid snap’? Fluid Fixed Grid Grids are percentage-based, for smooth, non-snappy width adjustments. Are you frustrated when collapsing your grid into a single column seems to be your only option for small screens? And what about those pesky phablets?!
Fluid Fixed Grid Grids can cure all1 your responsive layout problems!!
and a main content area that goes to the right on large screens, but stacks on top of the sidebar on medium & small (via the .flow-opposite class - thanks foldy)
and a sidebar area
.grid-6 and .grid-4 confuse you?
Instead, try our simple to understand and easy to remember classes like .grid-half and .grid-third.
Do your grids suffer from bad alignment? Fluid Fixed Grid Grids comes with padding classes so you can make sure all your boxes line up just right!
.padding-sides
.padding (for grid gutter spacing)
.padding-inner (padding for content)
.padding
.padding-inner-sides
(padding only on the sides)
Do you like to nest your grids? With Fluid Fixed Grid Grids, you can nest grids inside of grids that are nested within nested grids. Get crazy with it! Go bonkers! Fly your grid freak flag high!
Also you can use the .padding-reverse (and .row if you are used to twitter bootstrap) class to help with nested grids.
no .padding-reverse
no .padding-reverse
no .padding-reverse
.padding-reverse
.padding-reverse
.padding-reverse
Bonus Offer! Fluid Fixed Grid Grids comes with a free copy of Equalize! Equalize the heights2 of your grids by adding the .equalize class to the parent grid container3.
SASS-Enabled. Want to use an 18-column grid instead? Have your own ideas for modifications and features? This grid was built on top of SASS, so if you are a SASS enthusiast, you will find it easy to customize. All of the grid classes are created in a gridGenerator() mixin (see grid.scss and _grid.generator.scss).
Not into SASS? That’s ok. Just ignore or delete the grid.scss file and be on your merry way.
Self documenting. Expressive. Modular. Fluid Fixed Grid Grids follows the approach of separating structural layout classes from content styling classes. In other words, let grid classes arrange content on the page, then for inner content, write your own classes to style everything else (color, typography, decorative styles, etc.). By keeping layout classes separate, it becomes easier to treat your content in a modular way.
No more searching through css to find and adjust the structure of the page. Once you become familiar with the Fluid Fixed Grid Grids approach, you’ll be able to quickly look at the markup and know what it is doing. Simply add or change classes to make adjustments on the fly.
1 Well, maybe not all of your layout problems! Refer to the side effects listed below.
2 Refer to the source code at the bottom of this page for more info.
3 If you do not wish to use equalize, simply do not embed the equalize.min.js script