CSS- Responsive Masonry Layout using Only CSS without jQuery

Question: How can we do responsive Masonry Layout using Only CSS without jQuery?
Answer: Below are the code and output responsive Masonry Layout using Only CSS without jQuery.
HTNL

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<article> <article>   <section>     Lorem ipsum dolor sit amet, consectetur.   </section>   <section>     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.   </section>   <section>     Lorem ipsum dolor sit amet, consectetur.   </section>   <section>     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.   </section>   <section>     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.   </section>   <section>     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.   </section>   <section>     Lorem ipsum dolor sit amet, consectetur adipisicing elit.   </section>   <section>     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat  architecto quis tenetur fugiat veniam iste molestiae fuga labore!   </section>   <section>     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.   </section>   <section>     Lorem ipsum dolor sit.   </section>   <section>     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.   </section>   <section>     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.   </section> </article> </article>

CSS

?

1 2 3

*, *: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;}

OUTPUT