Pure Css Pinterest Style Responsive Content Box Design (No Script)
by muthu[ Edit ] 2014-07-17 18:15:42
Pure Css Pinterest Style Responsive Content Box Design (No Script)
Demo
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { font:12px Arial, Helvetica, sans-serif; }
#zigzag { width:60%; margin:0 auto; }
#zigzag-columns{ -webkit-column-width:220px; -moz-column-width:220px; -webkit-column-gap:5%; -moz-column-gap:5%; width:100%; padding:2%;
font-family:Arial, Helvetica, sans-serif; }
#zigzag-columns div { width:95%; background:#fefefe; border:2px solid #fcfcfc; box-shadow:0 1px 2px rgba(34,25,25,0.4); margin:0 2px 5%; padding:2%; padding-bottom:10px;-moz-transition:all .4s ease-in-out; display:inline-block; -webkit-column-break-inside:avoid;column-break-inside:avoid; border-radius:8px; background:#f3f3f3; }
h2 { background:#009cff; margin-bottom:0; margin-top:0; font:bold 16px Arial, Helvetica, sans-serif; color:#FFF; padding:2% 4%; border-radius:5px; }
p { font:12px Arial, Helvetica, sans-serif; }
h1 { font-weight:bold; }
@media screen and (max-width:1280px) { #zigzag { width:90%; margin:0 auto; } }
@media screen and (max-width:768px) { #zigzag { width:90%; margin:0 auto; } }
@media screen and (max-width:480px) { #zigzag { width:90%; margin:0 auto; } }
</style>
</head>
<body>
<div id="zigzag">
<h1 align="center">Pure Css Pinterest Style Responsive Content Box Design (No Script)</h1>
<div id="zigzag-columns">
<div>
<h2>Content Box</h2>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
</div>
<div>
<h2>Content Box</h2>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
</div>
<div>
<h2>Content Box</h2>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
</div>
<div>
<h2>Content Box</h2>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
</div>
<div>
<h2>Content Box</h2>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
</div>
<div>
<h2>Content Box</h2>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
</div>
<div>
<h2>Content Box1</h2>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
</div>
<div>
<h2>Content Box1</h2>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
</div>
<div>
<h2>Content Box1</h2>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
<p>This section describes the status of this document at the time of its publication. Other documents may supersede this document.</p>
</div>
</div>
</div>
</body>
</html>
