Skip to content

Instantly share code, notes, and snippets.

@mickelsonm

mickelsonm/grid.css

Created March 18, 2015 19:16
Show Gist options
  • Save mickelsonm/eb471adbfe8daeab0bd3 to your computer and use it in GitHub Desktop.
Save mickelsonm/eb471adbfe8daeab0bd3 to your computer and use it in GitHub Desktop.
Download ZIP
grid-example
Raw
grid.css
/** Resetting box model **/
.row, .column {
box-sizing: border-box;
}
/** Clear fixes **/
.row:before, .row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
/** Defining column **/
.column {
position: relative;
float: left;
}
/**
Creating gutter (separation between columns)
Note: this would change depending on the column layout
**/
.column + .column {
margin-left: 1.6%;
}
/**
Calculating column widths - based on 12 column layout
//Step 1: determine width of a single column
scw = (100 – (m * (mc – 1))) / mc
scw = single column width
m = margin (1.6% for 12 column layout)
mc = max number of columns
//Step 2: calculate out the rest of the column widths
cw = (scw * cs) + (m * (cs – 1))
cw = column width
scw = single column width (6.86666666667% for 12 column layout)
cs = column span (1-12 for 12 column layout)
m = margin (1.6% for 12 column layout)
**/
.column-1 {
width: 6.86666666667%;
}
.column-2 {
width: 15.3333333333%;
}
.column-3 {
width: 23.8%;
}
.column-4 {
width: 32.2666666667%;
}
.column-5 {
width: 40.7333333333%;
}
.column-6 {
width: 49.2%;
}
.column-7 {
width: 57.6666666667%;
}
.column-8 {
width: 66.1333333333%;
}
.column-9 {
width: 74.6%;
}
.column-10 {
width: 83.0666666667%;
}
.column-11 {
width: 91.5333333333%;
}
.column-12 {
width: 100%;
}
/**
Mobile Support
- Allows every column to take up the fill width of its parent element for devices
that have a viewport that is less than 550px wide.
- Gutters are no longer applicable
Note: This does
**/
@media only screen and (max-width: 550px) {
.column-1,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9,
.column-10,
.column-11,
.column-12 {
width: auto;
float: none;
}
.column + .column {
margin-left: 0;
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/main.css">
<title>Grid Test</title>
</head>
<body>
<header class="row">
<div class="column column-12">
GRID TEST
</div>
</header>
<section class="content">
<h1>GRID TEST</h1>
<div class="row">
<div class="column column-12">
<div class="column column-4">
<h3>Column 1</h3>
</div>
<div class="column column-4">
<h3>Column 2</h3>
</div>
<div class="column column-4">
<h3>Column 3</h3>
<div class="row">
<div class="column column-6">
<h6>C3-C1</h6>
</div>
<div class="column column-6">
<h6>C3-C2</h6>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="row">
<div class="column column-12">
<span>&copy;2015 GridTest&trade;. All rights reserved.</span>
</div>
</footer>
</body>
</html>
Raw
main.css
body{
margin: 0;
padding: 0;
background-color: #ccbbaa;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
}
header{
background-color: #111;
color: #fff;
padding: 20px;
}
footer{
background-color: #111;
color: #fff;
padding: 20px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.content{
height: 650px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment