<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<style>
body
{
background: #fff;
color: #666;
font: 85%/140% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a
{
color: #69C;
text-decoration: none;
}
a:hover
{
color: #F60;
}
h1
{
font: 1.7em;
line-height: 110%;
color: #000;
}
h1, h2, h3
{
color: #000;
}
h3
{
border-top: solid 1px #eee;
padding: 20px 0;
margin: 20px 0 0;
font-size: 150%;
}
p
{
margin: 0 0 20px;
}
/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
display: block;
}
#pagewrap
{
width: 978px;
max-width: 96%;
margin: 0 auto;
}
.wrapper
{
overflow: hidden;
}
/************************************************************************************
COLUMN
*************************************************************************************/
.col
{
background: #eee;
float: left;
margin-left: 3.2%;
margin-bottom: 30px;
}
.fullwidth .col
{
float: none;
margin-left: 0;
}
/* grid3 col */
.grid3 .col
{
width: 31.2%;
}
/* clear col */
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1)
{
margin-left: 0;
clear: left;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* reset cols to 2-column */
@media screen and (max-width: 600px)
{
/* grid3 */
.grid3 .col
{
width: 48.4%;
}
.grid3 .col:nth-of-type(3n+1)
{
margin-left: 3.2%;
clear: none;
}
.grid3 .col:nth-of-type(2n+1)
{
margin-left: 0;
clear: left;
}
}
/* reset cols to fullwidth */
@media screen and (max-width: 400px)
{
.col
{
width: 100% !important;
margin-left: 0 !important;
clear: none !important;
}
}
</style>
</head>
<body>
<div id="pagewrap">
<!-- /wrapper -->
<h3>Grid3</h3>
<div class="wrapper grid3">
<article class="col">
Column 1
</article>
<article class="col">
Column 2
</article>
<article class="col">
Column 3
</article>
<article class="col">
Column 4
</article>
<article class="col">
Column 5
</article>
<article class="col">
Column 6
</article>
</div>
<div class="wrapper fullwidth">
</div>
</div>
</body>
</html>
