Skip to content

Instantly share code, notes, and snippets.

@davidvandenbor

davidvandenbor/bootstrap-blockgrid-usage.html

Last active August 29, 2015 14:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save davidvandenbor/a4eed5da2c8d8bb0e41e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save davidvandenbor/a4eed5da2c8d8bb0e41e to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap Block grid from Zurb Foundation
Raw
bootstrap-blockgrid-usage.html
<div class="container">
<div class="block-grid-lg-4 block-grid-md-3 block-grid-sm-2">
<div class="block-grid-item">
<h1>User 1</h1>
</div>
<div class="block-grid-item">
<h1>User 2</h1>
</div>
<div class="block-grid-item">
<h1>User 3</h1>
</div>
<div class="block-grid-item">
<h1>User 4</h1>
</div>
</div>
</div>
Raw
bootstrap-blockgrid.css
[class*="block-grid-"] {
display: block;
margin: -15px;
padding: 0;
}
[class*="block-grid-"]:before,
[class*="block-grid-"]:after {
content: " ";
display: table;
}
[class*="block-grid-"]:after {
clear: both;
}
.block-grid-item {
display: inline;
margin: 0;
padding: 15px;
height: auto;
float: left;
list-style: none;
}
.block-grid-xs-1 > .block-grid-item {
width: 100%;
}
.block-grid-xs-1 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-xs-1 > .block-grid-item:nth-of-type(1n+1) {
clear: both;
}
.block-grid-xs-2 > .block-grid-item {
width: 50%;
}
.block-grid-xs-2 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-xs-2 > .block-grid-item:nth-of-type(2n+1) {
clear: both;
}
.block-grid-xs-3 > .block-grid-item {
width: 33.333333333333336%;
}
.block-grid-xs-3 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-xs-3 > .block-grid-item:nth-of-type(3n+1) {
clear: both;
}
.block-grid-xs-4 > .block-grid-item {
width: 25%;
}
.block-grid-xs-4 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-xs-4 > .block-grid-item:nth-of-type(4n+1) {
clear: both;
}
.block-grid-xs-5 > .block-grid-item {
width: 20%;
}
.block-grid-xs-5 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-xs-5 > .block-grid-item:nth-of-type(5n+1) {
clear: both;
}
.block-grid-xs-6 > .block-grid-item {
width: 16.666666666666668%;
}
.block-grid-xs-6 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-xs-6 > .block-grid-item:nth-of-type(6n+1) {
clear: both;
}
.block-grid-xs-7 > .block-grid-item {
width: 14.285714285714286%;
}
.block-grid-xs-7 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-xs-7 > .block-grid-item:nth-of-type(7n+1) {
clear: both;
}
.block-grid-xs-8 > .block-grid-item {
width: 12.5%;
}
.block-grid-xs-8 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-xs-8 > .block-grid-item:nth-of-type(8n+1) {
clear: both;
}
.block-grid-xs-9 > .block-grid-item {
width: 11.11111111111111%;
}
.block-grid-xs-9 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-xs-9 > .block-grid-item:nth-of-type(9n+1) {
clear: both;
}
.block-grid-xs-10 > .block-grid-item {
width: 10%;
}
.block-grid-xs-10 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-xs-10 > .block-grid-item:nth-of-type(10n+1) {
clear: both;
}
.block-grid-xs-11 > .block-grid-item {
width: 9.090909090909092%;
}
.block-grid-xs-11 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-xs-11 > .block-grid-item:nth-of-type(11n+1) {
clear: both;
}
.block-grid-xs-12 > .block-grid-item {
width: 8.333333333333334%;
}
.block-grid-xs-12 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-xs-12 > .block-grid-item:nth-of-type(12n+1) {
clear: both;
}
@media (min-width: 768px) {
.block-grid-sm-1 > .block-grid-item {
width: 100%;
}
.block-grid-sm-1 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-sm-1 > .block-grid-item:nth-of-type(1n+1) {
clear: both;
}
.block-grid-sm-2 > .block-grid-item {
width: 50%;
}
.block-grid-sm-2 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-sm-2 > .block-grid-item:nth-of-type(2n+1) {
clear: both;
}
.block-grid-sm-3 > .block-grid-item {
width: 33.333333333333336%;
}
.block-grid-sm-3 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-sm-3 > .block-grid-item:nth-of-type(3n+1) {
clear: both;
}
.block-grid-sm-4 > .block-grid-item {
width: 25%;
}
.block-grid-sm-4 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-sm-4 > .block-grid-item:nth-of-type(4n+1) {
clear: both;
}
.block-grid-sm-5 > .block-grid-item {
width: 20%;
}
.block-grid-sm-5 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-sm-5 > .block-grid-item:nth-of-type(5n+1) {
clear: both;
}
.block-grid-sm-6 > .block-grid-item {
width: 16.666666666666668%;
}
.block-grid-sm-6 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-sm-6 > .block-grid-item:nth-of-type(6n+1) {
clear: both;
}
.block-grid-sm-7 > .block-grid-item {
width: 14.285714285714286%;
}
.block-grid-sm-7 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-sm-7 > .block-grid-item:nth-of-type(7n+1) {
clear: both;
}
.block-grid-sm-8 > .block-grid-item {
width: 12.5%;
}
.block-grid-sm-8 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-sm-8 > .block-grid-item:nth-of-type(8n+1) {
clear: both;
}
.block-grid-sm-9 > .block-grid-item {
width: 11.11111111111111%;
}
.block-grid-sm-9 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-sm-9 > .block-grid-item:nth-of-type(9n+1) {
clear: both;
}
.block-grid-sm-10 > .block-grid-item {
width: 10%;
}
.block-grid-sm-10 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-sm-10 > .block-grid-item:nth-of-type(10n+1) {
clear: both;
}
.block-grid-sm-11 > .block-grid-item {
width: 9.090909090909092%;
}
.block-grid-sm-11 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-sm-11 > .block-grid-item:nth-of-type(11n+1) {
clear: both;
}
.block-grid-sm-12 > .block-grid-item {
width: 8.333333333333334%;
}
.block-grid-sm-12 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-sm-12 > .block-grid-item:nth-of-type(12n+1) {
clear: both;
}
}
@media (min-width: 992px) {
.block-grid-md-1 > .block-grid-item {
width: 100%;
}
.block-grid-md-1 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-md-1 > .block-grid-item:nth-of-type(1n+1) {
clear: both;
}
.block-grid-md-2 > .block-grid-item {
width: 50%;
}
.block-grid-md-2 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-md-2 > .block-grid-item:nth-of-type(2n+1) {
clear: both;
}
.block-grid-md-3 > .block-grid-item {
width: 33.333333333333336%;
}
.block-grid-md-3 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-md-3 > .block-grid-item:nth-of-type(3n+1) {
clear: both;
}
.block-grid-md-4 > .block-grid-item {
width: 25%;
}
.block-grid-md-4 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-md-4 > .block-grid-item:nth-of-type(4n+1) {
clear: both;
}
.block-grid-md-5 > .block-grid-item {
width: 20%;
}
.block-grid-md-5 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-md-5 > .block-grid-item:nth-of-type(5n+1) {
clear: both;
}
.block-grid-md-6 > .block-grid-item {
width: 16.666666666666668%;
}
.block-grid-md-6 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-md-6 > .block-grid-item:nth-of-type(6n+1) {
clear: both;
}
.block-grid-md-7 > .block-grid-item {
width: 14.285714285714286%;
}
.block-grid-md-7 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-md-7 > .block-grid-item:nth-of-type(7n+1) {
clear: both;
}
.block-grid-md-8 > .block-grid-item {
width: 12.5%;
}
.block-grid-md-8 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-md-8 > .block-grid-item:nth-of-type(8n+1) {
clear: both;
}
.block-grid-md-9 > .block-grid-item {
width: 11.11111111111111%;
}
.block-grid-md-9 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-md-9 > .block-grid-item:nth-of-type(9n+1) {
clear: both;
}
.block-grid-md-10 > .block-grid-item {
width: 10%;
}
.block-grid-md-10 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-md-10 > .block-grid-item:nth-of-type(10n+1) {
clear: both;
}
.block-grid-md-11 > .block-grid-item {
width: 9.090909090909092%;
}
.block-grid-md-11 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-md-11 > .block-grid-item:nth-of-type(11n+1) {
clear: both;
}
.block-grid-md-12 > .block-grid-item {
width: 8.333333333333334%;
}
.block-grid-md-12 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-md-12 > .block-grid-item:nth-of-type(12n+1) {
clear: both;
}
}
@media (min-width: 1200px) {
.block-grid-lg-1 > .block-grid-item {
width: 100%;
}
.block-grid-lg-1 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-lg-1 > .block-grid-item:nth-of-type(1n+1) {
clear: both;
}
.block-grid-lg-2 > .block-grid-item {
width: 50%;
}
.block-grid-lg-2 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-lg-2 > .block-grid-item:nth-of-type(2n+1) {
clear: both;
}
.block-grid-lg-3 > .block-grid-item {
width: 33.333333333333336%;
}
.block-grid-lg-3 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-lg-3 > .block-grid-item:nth-of-type(3n+1) {
clear: both;
}
.block-grid-lg-4 > .block-grid-item {
width: 25%;
}
.block-grid-lg-4 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-lg-4 > .block-grid-item:nth-of-type(4n+1) {
clear: both;
}
.block-grid-lg-5 > .block-grid-item {
width: 20%;
}
.block-grid-lg-5 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-lg-5 > .block-grid-item:nth-of-type(5n+1) {
clear: both;
}
.block-grid-lg-6 > .block-grid-item {
width: 16.666666666666668%;
}
.block-grid-lg-6 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-lg-6 > .block-grid-item:nth-of-type(6n+1) {
clear: both;
}
.block-grid-lg-7 > .block-grid-item {
width: 14.285714285714286%;
}
.block-grid-lg-7 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-lg-7 > .block-grid-item:nth-of-type(7n+1) {
clear: both;
}
.block-grid-lg-8 > .block-grid-item {
width: 12.5%;
}
.block-grid-lg-8 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-lg-8 > .block-grid-item:nth-of-type(8n+1) {
clear: both;
}
.block-grid-lg-9 > .block-grid-item {
width: 11.11111111111111%;
}
.block-grid-lg-9 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-lg-9 > .block-grid-item:nth-of-type(9n+1) {
clear: both;
}
.block-grid-lg-10 > .block-grid-item {
width: 10%;
}
.block-grid-lg-10 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-lg-10 > .block-grid-item:nth-of-type(10n+1) {
clear: both;
}
.block-grid-lg-11 > .block-grid-item {
width: 9.090909090909092%;
}
.block-grid-lg-11 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-lg-11 > .block-grid-item:nth-of-type(11n+1) {
clear: both;
}
.block-grid-lg-12 > .block-grid-item {
width: 8.333333333333334%;
}
.block-grid-lg-12 > .block-grid-item:nth-of-type(n) {
clear: none;
}
.block-grid-lg-12 > .block-grid-item:nth-of-type(12n+1) {
clear: both;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment