Fluid Fixed Grid Framework

Below is the Extra Strentgh Responsive Grid's page running with the Fluid Fixed Grid Framework.

x

HelloHelloHelloHelloHello

x

Hello

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 all¹ your responsive layout problems!!

↘Get fluidFixedGrid↙

With Fluid Fixed Grid Grids, you can take total control of your layouts.

You can do the normal columns

that collapse to stacked

when you are on a small screen...

How about four columns on large...

two columns on medium (phablet!)...

and stacked on small...

Not a problem!

Or take for example a content group with a header block...

and a main content area that goes to the right on large screens, but stacks on top of the sidebar on medium & small screens via the .float-left & .float-right classes for small, medium and large display outputs.

Resize the browser to see it in action

and a sidebar area

with inner boxes

that stack on large screens,

are columned on medium,

then go back to stacked on small?

Do class names like .grid-6 and .grid-4 confuse you? Instead, try our simple to understand and easy to remember classes like .grid-half and .grid-third.

.whole

.half

.one-third

.two-thirds

.one-quarter

.three-quarters

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!

a

b

c

d

e

f

g

h

i

j

k

l

m

n

o

p

q

r

s

t

u

v

w

x

y

z

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

.padding-reverse

Bonus Offer! Fluid Fixed Grid Grids automatically fixes row heights just as Equalize does. Equalize the heights of your grids by adding the .row class to the parent grid container².

Before Equalize

PBR squid helvetica, jean shorts next level gastropub Hipster Ipsum.

Fixie fanny pack. Kogi mlkshk gentrify trust fund aesthetic, food truck flexitarian direct trade iphone helvetica pitchfork. Synth williamsburg mcsweeney's.

Thundercats cardigan fingerstache terry richardson VHS kale chips leggings. Portland four loko etsy beard, yr odd future echo park quinoa locavore terry richardson. Whatever fap keffiyeh vegan master cleanse. Art party banksy Austin.

After Equalize

PBR squid helvetica, jean shorts next level gastropub.

Fixie fanny pack. Kogi mlkshk gentrify trust fund aesthetic, food truck flexitarian direct trade iphone helvetica pitchfork. Synth williamsburg mcsweeney's.

Thundercats cardigan fingerstache terry richardson VHS kale chips leggings. Portland four loko etsy beard, yr odd future echo park quinoa locavore terry richardson. Whatever fap keffiyeh vegan master cleanse. Art party banksy Austin.

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.

¹ Well, maybe not all of your layout problems!

² If you do not wish to use equalize, simply add .rowCnt instead of .row