<div class="content__title">
|
<h1>
|
Grid Masonry
|
<small>Pure CSS and mobile first with a fallback to inline grid, Supported from IE10,
|
<a href="//caniuse.com/#feat=multicolumn"
|
target="_blank">browser compatibility</a>
|
</small>
|
</h1>
|
</div>
|
<div class="row-masonry row-masonry-xl-8 row-masonry-lg-5 row-masonry-md-4 row-masonry-sm-3 row-masonry-xs-2">
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Ipsum do ullamco laboris excepteur. Do incididunt commodo adipisicing officia sunt tempor. Deserunt exercitation proident
|
enim veniam laboris fugiat ipsum veniam dolore duis sit duis. In deserunt ut nulla ad eu.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Veniam non sunt quis ex consequat ea esse duis esse. Ut incididunt eiusmod occaecat esse aute adipisicing culpa. Voluptate
|
ullamco labore laboris et do in.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Esse elit et aute do aliqua ipsum cillum consectetur deserunt deserunt cupidatat aute aliqua aute. Aliquip ad incididunt
|
dolor cupidatat quis officia cillum sit ex. Irure ut sit Lorem sunt nulla excepteur ipsum ipsum dolore cillum cupidatat
|
ipsum. Do amet aliquip sunt consectetur nulla. Cupidatat ad consectetur veniam aliqua non ullamco laboris eiusmod.
|
In voluptate officia aliquip dolore sit qui consectetur fugiat aliqua duis occaecat. Non mollit elit nisi ea mollit
|
anim excepteur ut qui exercitation.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Ullamco incididunt do deserunt cillum veniam cillum amet ad. Deserunt laborum cupidatat mollit proident adipisicing
|
in culpa consequat adipisicing et non. Aliqua ea elit voluptate esse aliqua dolor ipsum. Ut officia officia fugiat
|
sint esse qui incididunt Lorem occaecat.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Ea non irure qui fugiat aliquip esse adipisicing. Cillum aliquip dolor non fugiat ad aliqua. In voluptate et non irure
|
elit. Tempor qui sunt incididunt amet tempor sint et voluptate sunt qui sit culpa proident ipsum. Sunt duis pariatur
|
officia ut magna pariatur fugiat dolor cillum laboris eu. Qui incididunt minim nostrud exercitation aliquip.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Fugiat commodo ad consectetur reprehenderit. Officia fugiat ea proident exercitation occaecat mollit laboris fugiat
|
consequat deserunt anim ipsum magna ex. Esse do amet cillum aute ut ea.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Magna id fugiat laborum elit ullamco deserunt do laboris non qui. Duis et exercitation nulla labore cupidatat nostrud
|
pariatur reprehenderit in nostrud. Consequat consequat consectetur mollit adipisicing. Laborum amet sit sint aliquip
|
fugiat adipisicing enim reprehenderit. Voluptate nisi reprehenderit voluptate sit enim aute deserunt cupidatat et
|
dolore labore voluptate id dolore.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Reprehenderit non ullamco quis non excepteur irure excepteur anim ullamco labore. Sit occaecat consectetur laborum
|
consequat elit sint sit sunt. Duis aliquip magna ipsum consequat eiusmod officia.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Magna nostrud ex cupidatat id in non labore ad voluptate est irure tempor. Nostrud aliqua magna laborum incididunt
|
deserunt veniam nulla nulla labore cillum. Id laboris Lorem dolore minim reprehenderit eu proident aliqua magna id
|
aute aute. Aliqua est et nulla eu duis id laborum magna.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Sint pariatur eiusmod id sit est exercitation laboris mollit pariatur minim. Ex aliquip commodo nulla reprehenderit
|
et laboris consequat pariatur culpa culpa proident ullamco laboris. Ex aliquip deserunt labore aliquip ea est sit
|
quis amet tempor sunt amet. Id reprehenderit do elit sit consectetur. Aute amet sint tempor ipsum sint laboris est
|
do culpa tempor. Pariatur fugiat aute officia et laboris voluptate sit nisi in anim excepteur amet eu.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Incididunt ut eu fugiat do deserunt voluptate id et est aliqua eu sint. Ad dolore excepteur ipsum nulla proident dolore
|
aute sunt. Aute enim do dolor laborum id eiusmod sit.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Amet elit et ad amet nulla minim deserunt mollit adipisicing. Laboris non ipsum ad laborum non magna velit tempor cillum
|
cillum. Proident dolore eiusmod ex elit cillum. Cupidatat duis pariatur ut id deserunt laboris. Culpa excepteur est
|
deserunt eiusmod do do ut est labore eiusmod. Eu eu veniam excepteur mollit anim est velit nisi. Velit quis tempor
|
laboris culpa.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Nostrud nulla nisi laboris officia anim nostrud nulla cupidatat veniam ea duis. Pariatur ea ullamco irure laborum.
|
Consectetur labore in occaecat ullamco est fugiat nisi sunt deserunt. Non sunt dolor elit culpa dolore adipisicing.
|
Fugiat mollit ex voluptate nulla deserunt dolore ea sunt commodo et qui laborum.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Quis pariatur ea nisi excepteur mollit nulla reprehenderit labore. Exercitation pariatur eu pariatur tempor deserunt
|
ad occaecat ad in pariatur id et dolore. Enim veniam aute magna fugiat eiusmod velit quis. Laborum sit consequat
|
dolore qui minim culpa aliqua pariatur cillum velit. Nostrud enim aliqua ut nisi consectetur pariatur fugiat do esse
|
fugiat enim et tempor ad. Eiusmod ut incididunt proident labore sint sit culpa excepteur id. Fugiat mollit qui eu
|
eu fugiat proident.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Tempor do officia magna do sunt. Nulla cillum anim excepteur adipisicing commodo culpa. Adipisicing pariatur qui voluptate
|
consectetur mollit quis sunt enim veniam ullamco. Duis nostrud anim aliqua adipisicing fugiat aute excepteur deserunt
|
enim occaecat pariatur ad. Qui aliquip aute labore minim ipsum in aute et. Aliqua laboris magna aute incididunt esse
|
ex. Eu ipsum occaecat aliquip enim aute.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Labore cillum id non anim eiusmod officia. Nostrud laboris sint aliquip cillum magna. Minim sit labore proident culpa
|
non nisi cillum non officia est. Proident elit sit adipisicing est cupidatat ex cupidatat labore aliqua ad.
|
</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Officia tempor ea adipisicing ad sit qui dolore consequat irure veniam. Est sit magna deserunt sint aute commodo fugiat
|
fugiat irure sint dolore commodo amet. Duis cillum dolor quis consectetur dolor et et culpa id elit. Amet ut nulla
|
sunt non in non duis sit fugiat consequat. Velit incididunt ullamco sunt deserunt nulla ad adipisicing. In fugiat
|
ullamco deserunt amet. Ex voluptate amet magna minim ut incididunt veniam.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Occaecat anim do cillum est dolore sint. Do ut proident exercitation est incididunt irure duis ea laborum minim cillum
|
est. Mollit irure non qui veniam labore eu elit veniam ea amet nisi esse labore. Elit ut nulla exercitation fugiat
|
cupidatat non cupidatat sint id minim.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Voluptate incididunt tempor nulla voluptate esse dolor Lorem veniam voluptate adipisicing laborum in aliqua. Proident
|
voluptate exercitation mollit consectetur qui commodo minim. Ea esse veniam velit minim reprehenderit incididunt
|
reprehenderit do laborum aliqua. In quis et excepteur cupidatat qui duis. Pariatur Lorem laborum ut consectetur deserunt
|
consectetur officia tempor commodo aliqua aliqua ipsum.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Ullamco officia esse ex reprehenderit reprehenderit cupidatat. Sunt excepteur sint consectetur ex aliqua excepteur.
|
Laborum id cupidatat ea reprehenderit sit eiusmod ad exercitation ullamco nostrud. Nulla tempor voluptate magna amet
|
culpa exercitation ad laborum in. Aliqua voluptate deserunt pariatur excepteur. Ullamco voluptate est dolore velit
|
aliquip tempor nostrud deserunt. Minim excepteur dolor nulla commodo incididunt ex ullamco excepteur cillum veniam
|
quis reprehenderit.</p>
|
</div>
|
</div>
|
</div>
|
<h3 class="my-md">Masonry with any kind of element</h3>
|
<div class="row-masonry row-masonry-xl-8 row-masonry-lg-5 row-masonry-md-4 row-masonry-sm-3 row-masonry-xs-2">
|
<div class="col-masonry">
|
<img src="assets/tmp/img/bg1.jpg" alt="" />
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Proident est cillum magna qui pariatur. Deserunt ut voluptate sint aliquip anim nisi consequat. Elit laboris anim anim
|
dolor incididunt. Nostrud qui labore qui cillum excepteur mollit excepteur consequat esse anim enim ad enim. Esse
|
qui mollit et minim mollit laboris reprehenderit laborum fugiat do id. Mollit labore proident cupidatat aliqua dolore
|
exercitation consectetur commodo sint mollit nostrud esse sunt. Nostrud fugiat duis sit excepteur excepteur mollit.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<img src="assets/tmp/img/bg2.jpg" alt="" />
|
</div>
|
<div class="col-masonry">
|
<img src="assets/tmp/img/bg3.jpg" alt="" />
|
</div>
|
<div class="col-masonry">
|
<img src="assets/tmp/img/bg4.jpg" alt="" />
|
</div>
|
<div class="col-masonry">
|
<img src="assets/tmp/img/bg5.jpg" alt="" />
|
</div>
|
<div class="col-masonry">
|
<img src="assets/tmp/img/bg6.jpg" alt="" />
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Dolore consequat elit est qui dolore dolore tempor amet magna adipisicing non in commodo. Veniam sint et proident duis
|
eu nulla commodo sunt duis aliquip eiusmod. Occaecat incididunt deserunt consectetur non aliquip velit ullamco eu
|
sit labore proident exercitation. Cillum deserunt voluptate eu eiusmod sint in esse. Velit anim non Lorem proident
|
eu sit nisi Lorem aute do sit ea. Esse nostrud amet excepteur occaecat incididunt amet laborum aliqua qui mollit
|
ullamco. Labore incididunt ullamco non ipsum Lorem duis commodo adipisicing in.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Amet est dolor id esse veniam duis eu ex velit. Id qui deserunt voluptate veniam. Voluptate ea ipsum in eiusmod enim
|
do velit commodo nulla sint. Fugiat ipsum esse pariatur voluptate exercitation magna ut proident consectetur et.
|
Sint qui elit exercitation anim duis nulla commodo aliqua excepteur pariatur.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<img src="assets/tmp/img/bg7.jpg" alt="" />
|
</div>
|
<div class="col-masonry">
|
<img src="assets/tmp/img/bg8.jpg" alt="" />
|
</div>
|
<div class="col-masonry">
|
<div class="box-placeholder">
|
<h2 class="text-grey text-md mb-sm">Masonry Item</h2>
|
<p>Culpa amet adipisicing consequat nisi dolore sunt amet labore officia aliquip elit tempor officia aliqua. Deserunt
|
laborum enim ut laboris duis. Cillum non proident dolor ullamco cillum nostrud in sint aliqua cillum. Proident magna
|
incididunt occaecat eiusmod cillum dolor tempor Lorem adipisicing nisi adipisicing mollit ex exercitation. Magna
|
nostrud est sunt incididunt culpa. Duis nulla elit ut ea adipisicing duis esse ullamco.</p>
|
</div>
|
</div>
|
<div class="col-masonry">
|
<img src="assets/tmp/img/bg9.jpg" alt="" />
|
</div>
|
<div class="col-masonry">
|
<img src="assets/tmp/img/bg10.jpg" alt="" />
|
</div>
|
</div>
|
