Monday, July 18, 2016

CSS- Responsive Masonry Layout using Only CSS without jQuery

<html>
<head>
<title>Masonry Layout</title>
<style>

*, *:before, *:after {box-sizing:  border-box !important;}
article {-moz-column-width: 13em; -webkit-column-width: 13em;-moz-column-gap: 1em; -webkit-column-gap: 1em; }
section {display: inline-block;margin:  0.25rem;padding:  1rem;width:  100%; background:  #efefef;}



</style>

</head>

<body>
<h1>Pure CSS Masonry</h1>
<p>By using CSS3 columns, we can easily create a Masonry.js-like layout where random-height blocks fit together.</p>

<article>

  <section>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
  </section>
 
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p>
  </section>
 
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
  </section>
 
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p>
  </section>

  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.</p>
  </section>


  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.</p>
  </section>
 
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </section>
 
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat  architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p>
  </section>
 
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.</p>
  </section>
 
  <section>
    <p>Lorem ipsum dolor sit.</p>
  </section>
 
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.</p>
  </section>
 
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.</p>
  </section>
 
</article>
</body>

</html>

OUTPUT:  

 

No comments :

Post a Comment