Skip to content

Instantly share code, notes, and snippets.

@zachharkey

zachharkey/index.html

Created October 18, 2012 22:12
Show Gist options
  • Save zachharkey/3915079 to your computer and use it in GitHub Desktop.
Save zachharkey/3915079 to your computer and use it in GitHub Desktop.
Download ZIP
Modified the .grid-pad class to maintain spacing when row overflows. This makes it possible to put, for example, 16 x 1/8 boxes in a grid and it naturally wraps to 2 rows.
Raw
index.html
<h1>Don't Overthink It Grids <em>(while we wait for flexbox)</em></h1>
<div class="grid">
<div class="col-2-3">
<div class="module">
<h3>2/3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div class="col-1-3">
<div class="module">
<h3>1/3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies</p>
</div>
</div>
</div>
<div class="grid grid-pad">
<div class="col-2-3">
<div class="module">
<h3>2/3 (Opt-in Outside Padding)</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div class="col-1-3">
<div class="module">
<h3>1/3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
</div>
</div>
</div>
<div class="grid grid-pad">
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
</div>
<div class="grid grid-pad">
<div class="col-1-4">
<div class="module">
<h3>1/4</h3>
</div>
</div>
<div class="col-1-2">
<div class="module">
<h3>1/2</h3>
</div>
</div>
<div class="col-1-4">
<div class="module">
<h3>1/4</h3>
</div>
</div>
</div>
<div class="grid">
<div class="col-1-2">
<div class="module">
<h3>1/2</h3>
</div>
</div>
<div class="col-1-2">
<div class="module">
<h3>1/2</h3>
</div>
</div>
</div>
<div class="grid grid-pad">
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
</div>
<h2>Responsive (stack below threshold)</h2>
<div class="grid grid-pad grid-stack-mobile">
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
</div>
Raw
style.scss
@import "compass";
* {
@include box-sizing(border-box);
}
$pad: 20px;
.grid {
background: white;
margin: 0 0 $pad 0;
&:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
.col-1-2 {
width: 50%;
}
.col-1-4 {
width: 25%;
}
.col-1-8 {
width: 12.5%;
}
.module {
padding: $pad;
background: #eee;
}
/* Opt-in outside padding */
.grid-pad {
padding: $pad 0 0 $pad;
[class*='col-'] {
margin-bottom: $pad;
&:last-of-type {
padding-right: $pad;
}
}
}
/* Selective application of stacked version */
@media all and (max-width:768px) {
.grid-stack-mobile {
[class*='col-'] {
float: none;
width: 100%;
}
}
}
/* Non-essential basic styles */
body {
padding: 10px 50px 200px;
background: url(http://subtlepatterns.com/patterns/[email protected]);
background-size: 300px 300px;
}
h1, h2 {
color: white;
em {
color: #666;
font-size: 16px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment