Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column,
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }
.lt-ie9 .column, .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }
.lt-ie9 .large-1,
.lt-ie9 .row .large-1 { width: 8.33333%; }
.lt-ie9 .large-2,
.lt-ie9 .row .large-2 { width: 16.66667%; }
.lt-ie9 .large-3,
.lt-ie9 .row .large-3 { width: 25%; }
.lt-ie9 .large-4,
.lt-ie9 .row .large-4 { width: 33.33333%; }
.lt-ie9 .large-5,
.lt-ie9 .row .large-5 { width: 41.66667%; }
.lt-ie9 .large-6,
.lt-ie9 .row .large-6 { width: 50%; }
.lt-ie9 .large-7,
.lt-ie9 .row .large-7 { width: 58.33333%; }
.lt-ie9 .large-8,
.lt-ie9 .row .large-8 { width: 66.66667%; }
.lt-ie9 .large-9,
.lt-ie9 .row .large-9 { width: 75%; }
.lt-ie9 .large-10,
.lt-ie9 .row .large-10 { width: 83.33333%; }
.lt-ie9 .large-11,
.lt-ie9 .row .large-11 { width: 91.66667%; }
.lt-ie9 .large-12,
.lt-ie9 .row .large-12 { width: 100%; }
.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }
.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }
.lt-ie9 .row .large-offset-3 { margin-left: 25%; }
.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }
.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }
.lt-ie9 .row .large-offset-6 { margin-left: 50%; }
.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }
.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }
.lt-ie9 .row .large-offset-9 { margin-left: 75%; }
.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }
.lt-ie9 .pull-2 { right: 16.66667%; }
.lt-ie9 .pull-3 { right: 25%; }
.lt-ie9 .pull-4 { right: 33.33333%; }
.lt-ie9 .pull-5 { right: 41.66667%; }
.lt-ie9 .pull-6 { right: 50%; }
.lt-ie9 .pull-7 { right: 58.33333%; }
.lt-ie9 .pull-8 { right: 66.66667%; }
.lt-ie9 .pull-9 { right: 75%; }
.lt-ie9 .pull-10 { right: 83.33333%; }
.lt-ie9 .push-2 { left: 16.66667%; }
.lt-ie9 .push-3 { left: 25%; }
.lt-ie9 .push-4 { left: 33.33333%; }
.lt-ie9 .push-5 { left: 41.66667%; }
.lt-ie9 .push-6 { left: 50%; }
.lt-ie9 .push-7 { left: 58.33333%; }
.lt-ie9 .push-8 { left: 66.66667%; }
.lt-ie9 .push-9 { left: 75%; }
.lt-ie9 .push-10 { left: 83.33333%; }
/* Nicolas Gallagher's micro clearfix */
.lt-ie9 .row { *zoom: 1; }
.lt-ie9 .row:before, .row:after { content: " "; display: table; }
.lt-ie9 .row:after { clear: both; }
/* Small Block Grids */
.lt-ie9 .small-block-grid-2 {
list-style: none
}
.lt-ie9 .small-block-grid-2 li {
float: left;
width: 50%;
padding: 0 10px 10px;
}
.lt-ie9 .small-block-grid-2 li:first-child+li {
float: right
}
.lt-ie9 .small-block-grid-2 li:first-child+li+li {
clear: both
}
.lt-ie9 .small-block-grid-3 {
list-style: none
}
.lt-ie9 .small-block-grid-3 li {
float: left;
width: 33.3333%;
padding: 0 10px 10px;
}
.lt-ie9 .small-block-grid-3 li:first-child+li+li {
float: right
}
.lt-ie9 .small-block-grid-3 li:first-child+li+li+li {
clear: both
}
.lt-ie9 .small-block-grid-4 {
list-style: none
}
.lt-ie9 .small-block-grid-4 li {
float: left;
width: 25%;
padding: 0 10px 10px;
}
.lt-ie9 .small-block-grid-4 li:first-child+li+li+li {
float: right
}
.lt-ie9 .small-block-grid-4 li:first-child+li+li+li+li {
clear: both
}
.lt-ie9 .small-block-grid-5 {
list-style: none
}
.lt-ie9 .small-block-grid-5 li {
float: left;
width: 20%;
padding: 0 10px 10px;
}
.lt-ie9 .small-block-grid-5 li:first-child+li+li+li+li {
float: right
}
.lt-ie9 .small-block-grid-5 li:first-child+li+li+li+li+li {
clear: both
}
.lt-ie9 .small-block-grid-6 {
list-style: none
}
.lt-ie9 .small-block-grid-6 li {
float: left;
width: 16.6667%;
padding: 0 10px 10px;
}
.lt-ie9 .small-block-grid-6 li:first-child+li+li+li+li+li {
float: right
}
.lt-ie9 .small-block-grid-6 li:first-child+li+li+li+li+li+li {
clear: both
}
.lt-ie9 .small-block-grid-7 {
list-style: none
}
.lt-ie9 .small-block-grid-7 li {
float: left;
width: 14.2857142%;
padding: 0 10px 10px;
}
.lt-ie9 .small-block-grid-7 li:first-child+li+li+li+li+li+li {
float: right
}
.lt-ie9 .small-block-grid-7 li:first-child+li+li+li+li+li+li+li {
clear: both
}
.lt-ie9 .small-block-grid-8 {
list-style: none
}
.lt-ie9 .small-block-grid-8 li {
float: left;
width: 12.5%;
padding: 0 10px 10px;
}
.lt-ie9 .small-block-grid-8 li:first-child+li+li+li+li+li+li+li {
float: right
}
.lt-ie9 .small-block-grid-8 li:first-child+li+li+li+li+li+li+li+li {
clear: both
}
.lt-ie9 .small-block-grid-9 {
list-style: none
}
.lt-ie9 .small-block-grid-9 li {
float: left;
width: 11.111111%;
padding: 0 10px 10px;
}
.lt-ie9 .small-block-grid-9 li:first-child+li+li+li+li+li+li+li+li {
float: right
}
.lt-ie9 .small-block-grid-9 li:first-child+li+li+li+li+li+li+li+li+li {
clear: both
}
.lt-ie9 .small-block-grid-10 {
list-style: none
}
.lt-ie9 .small-block-grid-10 li {
float: left;
width: 10%;
padding: 0 10px 10px;
}
.lt-ie9 .small-block-grid-10 li:first-child+li+li+li+li+li+li+li+li+li {
float: right
}
.lt-ie9 .small-block-grid-10 li:first-child+li+li+li+li+li+li+li+li+li+li {
clear: both
}
.lt-ie9 .small-block-grid-11 {
list-style: none
}
.lt-ie9 .small-block-grid-11 li {
float: left;
width: 9.0909%;
padding: 0 10px 10px;
}
.lt-ie9 .small-block-grid-11 li:first-child+li+li+li+li+li+li+li+li+li+li {
float: right
}
.lt-ie9 .small-block-grid-11 li:first-child+li+li+li+li+li+li+li+li+li+li+li {
clear: both
}
.lt-ie9 .small-block-grid-12 {
list-style: none
}
.lt-ie9 .small-block-grid-12 li {
float: left;
width: 8.333333%;
padding: 0 10px 10px;
}
.lt-ie9 .small-block-grid-12 li:first-child+li+li+li+li+li+li+li+li+li+li+li {
float: right
}
.lt-ie9 .small-block-grid-12 li:first-child+li+li+li+li+li+li+li+li+li+li+li+li {
clear: both
}
@boostbob

This comment has been minimized.

Copy link

commented May 31, 2013

thank you for this work, i just need this fox fix the block grid. ;-)

@cdekok

This comment has been minimized.

Copy link

commented Jun 10, 2013

Thx needed this one too :D

@benleivian

This comment has been minimized.

Copy link

commented Jul 9, 2013

Thanks for the block grid fixes!

@atopiler

This comment has been minimized.

Copy link

commented Jul 12, 2013

wow- thank you! This is exactly what I needed.

@Celleb

This comment has been minimized.

Copy link

commented Sep 18, 2013

This mixin fixes the grid problems for ie7 and 8

https://gist.github.com/Celleb/6605909

@miller18

This comment has been minimized.

Copy link

commented Oct 15, 2013

I have used a combination of respond.js and the above stylesheet to get my site working, with the exception of one thing. When I have a block grid with two classes:

ul class="large-block-grid-4 small-block-grid-2"

The layout breaks. It stacks the elements instead of spacing them out. Any advice?

@gavro

This comment has been minimized.

Copy link

commented Nov 8, 2013

If anyone is using the 'experimental' foundation medium-grid: I've forked this gist and added the the necessary medium overrides. See here: https://gist.github.com/gavro/7368484

@delroh

This comment has been minimized.

Copy link

commented May 8, 2014

@miller18 it breaks because this gist only has support for small-block-grid-x. You have to add rules for large-block-grid-x to make it work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.