Skip to content

Instantly share code, notes, and snippets.

@jm-maniego
Last active October 6, 2016 14:31
Show Gist options
  • Save jm-maniego/21310276df0cd09484d512c22712ddb2 to your computer and use it in GitHub Desktop.
Save jm-maniego/21310276df0cd09484d512c22712ddb2 to your computer and use it in GitHub Desktop.
Based on http://adamkaplan.me/grid/ and bootstrap grid
.fluid-container,
.fluid-container *,
.fluid-container *:before,
.fluid-container *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.fluid-container {
max-width: 940px;
width: 90%;
margin: 0 auto;
padding-right: 1rem;
padding-left: 1rem;
}
.fluid-container .row:after {
content: " ";
display: table;
clear: both;
}
.fluid-container .row {
*zoom: 1;
margin-right: -1rem;
margin-left: -1rem;
}
.fluid-container .row [class*="col-"] {
padding-left: 1rem;
padding-right: 1rem;
margin: 0;
margin-bottom: 1rem;
}
.fluid-container .row .row:last-child [class*="col-"] {
margin-bottom: 0;
}
.fluid-container img,
img.fluid {
width: 100%;
height: auto;
}
@media (min-width: 40rem) {
.fluid-container .row [class*="col-"] {
float: left;
}
.fluid-container .row .col-4 {
width: 33.33%;
}
.fluid-container .row .col-6 {
width: 50%;
}
.fluid-container .row .col-8 {
width: 66.67%;
}
.fluid-container .row .col-12 {
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment