Digital pattern library

Masonry grid (deprecated)

This pattern is deprecated. Do not attempt to use this pattern for any new website developments. It will be removed in a future update.

The masonry grid pattern arranges masonry items in a customisable grid.

With portrait container

This example shows a double-height masonry item with the portrait-container class.

chevron

MUSA is going greener

The Museum of the University of St Andrews (MUSA) has attained the top standard for sustainability from the Green Tourism Business Scheme.

chevron

A Rae of Aristic Sunshine

The work of one of Scotland's most revered contemporary artists, Barbara Rae, is to go on display in St Andrews, thanks to the University of St Andrews' Museum Collections.

chevron

World Cup fever at Sandy's Bar

Hundreds of football fans watched the World Cup final in the newly opened Sandy's Bar at the Students' Association on Sunday.

chevron

All in hand

Scientists have, for the first time, decoded the meanings of chimpanzee gestures. The study, by researches at teh University of St Andrews, reveals what wild chimpanzees are trying to say when they communicate with their body and hand movements.

chevron

Dogrees all round!

Graduation is a time for all the family but this year one pet dog made its way into the post-ceremony celebrations in the Quad.

chevron

Darling: "We belong together"

Alistair Darling to use public address to make the case for Scotland remaining in the UK

Code 
<!-- Begin pattern: masonry-grid //-->

<div class="masonry-grid">
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<!-- Begin pattern: masonry //-->
				
				    <div class="masonry landscape big-target-click-zone" style="background-image: url(../../assets/docs/images/placeholders/360x240-1.jpg)">
				        <div class="masonry-title">
				            <div class="masonry-chevron"><img src="../../assets/core/images/furniture/chevron@2x.png" alt="chevron"></div>
				            <h3><a href="#" class="big-target-anchor">MUSA is going greener</a></h3>
				            <p>The Museum of the University of St&nbsp;Andrews (MUSA) has attained the top standard for sustainability from the Green Tourism Business Scheme.</p>
				        </div>
				    </div>
				
				<!-- End pattern: masonry //-->			</div>

			<div class="col-md-4  portrait-container">
				<!-- Begin pattern: masonry //-->
				
				    <div class="masonry portrait big-target-click-zone" style="background-image: url(../../assets/docs/images/placeholders/360x240-2.jpg)">
				        <div class="masonry-title">
				            <div class="masonry-chevron"><img src="../../assets/core/images/furniture/chevron@2x.png" alt="chevron"></div>
				            <h3><a href="#" class="big-target-anchor">A Rae of Aristic Sunshine</a></h3>
				            <p>The work of one of Scotland's most revered contemporary artists, Barbara Rae, is to go on display in St&nbsp;Andrews, thanks to the University of St&nbsp;Andrews' Museum Collections.</p>
				        </div>
				    </div>
				
				<!-- End pattern: masonry //-->			</div>

			<div class="col-md-4">
				<!-- Begin pattern: masonry //-->
				
				    <div class="masonry big-target-click-zone" style="background-image: url(../../assets/docs/images/placeholders/360x240-3.jpg)">
				        <div class="masonry-title">
				            <div class="masonry-chevron"><img src="../../assets/core/images/furniture/chevron@2x.png" alt="chevron"></div>
				            <h3><a href="#" class="big-target-anchor">World Cup fever at Sandy's Bar</a></h3>
				            <p>Hundreds of football fans watched the World Cup final in the newly opened Sandy's Bar at the Students' Association on Sunday.</p>
				        </div>
				    </div>
				
				<!-- End pattern: masonry //-->			</div>

			<div class="col-md-4">
				<!-- Begin pattern: masonry //-->
				
				    <div class="masonry big-target-click-zone" style="background-image: url(../../assets/docs/images/placeholders/360x240-4.jpg)">
				        <div class="masonry-title">
				            <div class="masonry-chevron"><img src="../../assets/core/images/furniture/chevron@2x.png" alt="chevron"></div>
				            <h3><a href="#" class="big-target-anchor">All in hand</a></h3>
				            <p>Scientists have, for the first time, decoded the meanings of chimpanzee gestures. The study, by researches at teh University of St&nbsp;Andrews, reveals what wild chimpanzees are trying to say when they communicate with their body and hand movements.</p>
				        </div>
				    </div>
				
				<!-- End pattern: masonry //-->			</div>

			<div class="col-md-4">
				<!-- Begin pattern: masonry //-->
				
				    <div class="masonry big-target-click-zone" style="background-image: url(../../assets/docs/images/placeholders/360x240-5.jpg)">
				        <div class="masonry-title">
				            <div class="masonry-chevron"><img src="../../assets/core/images/furniture/chevron@2x.png" alt="chevron"></div>
				            <h3><a href="#" class="big-target-anchor">Dogrees all round!</a></h3>
				            <p>Graduation is a time for all the family but this year one pet dog made its way into the post-ceremony celebrations in the Quad.</p>
				        </div>
				    </div>
				
				<!-- End pattern: masonry //-->			</div>

			<div class=" col-md-8">
				<!-- Begin pattern: masonry //-->
				
				    <div class="masonry landscape big-target-click-zone" style="background-image: url(../../assets/docs/images/placeholders/360x240-6.jpg)">
				        <div class="masonry-title">
				            <div class="masonry-chevron"><img src="../../assets/core/images/furniture/chevron@2x.png" alt="chevron"></div>
				            <h3><a href="#" class="big-target-anchor">Darling: "We belong together"</a></h3>
				            <p>Alistair Darling to use public address to make the case for Scotland remaining in the UK</p>
				        </div>
				    </div>
				
				<!-- End pattern: masonry //-->			</div>
		</div>  <!-- // End .row -->
	</div> <!-- // End .container -->
</div>  <!-- // End .masonry-grid -->

<!-- End pattern: masonry-grid //-->