JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<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>1 Lorem ipsum dolor sit amet, consectetur.</p>
  </section>
  
  <section>
    <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p>
  </section>
  
  <section>
    <p>3 Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur.</p>
  </section>
  
  <section>
    <p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p>
  </section>

  <section>
    <p>5 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>6 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>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </section>
  
  <section>
    <p>8 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat  architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p>
  </section>
  
  <section>
    <p>9 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>10 Lorem ipsum dolor sit.</p>
  </section>
  
  <section>
   ...

CSS

*, *:before, *:after {box-sizing:  border-box !important;}


article {
 -moz-column-width: 250px;
 -webkit-column-width: 250px;
 -moz-column-gap: 20px;
 -webkit-column-gap: 20px; 
  
}

section {
 display: inline-block;
 margin:  0.25rem;
 padding:  1rem;
 width:  100%; 
 background:  #efefef;
}


p {
 margin:  1rem 0; 
}




/*  styles for background color, etc; not necessary for this thing to work  */



body {
 padding:  1em;
 font-family:  "Garamond", serif;
  width:600px;
}




h1 {
  font-size:  3rem;
  font-weight:  800;
}

body {
  line-height:  1.25;
}


p {
 text-align:  left;
}