Image block 1
<div class="custom-grid custom-grid--1"> <div class="custom-grid__item"><img src="//placehold.it/480x320"></div> <div class="custom-grid__item"><img src="//placehold.it/480x320"></div> <div class="custom-grid__item"><img src="//placehold.it/480x320"></div> <div class="custom-grid__item"><img src="//placehold.it/480x320"></div> </div>
Image block 2
<div class="custom-grid custom-grid--2"> <div class="custom-grid__item"><img src="http://placehold.it/910x300" /></div> <div class="custom-grid__item"><img src="http://placehold.it/455x300" /></div> <div class="custom-grid__item"><img src="http://placehold.it/455x300" /></div> </div>
Image block 3
<div class="custom-grid custom-grid--3"> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> </div>
Image block 4
<div class="custom-grid custom-grid--4"> <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> </div>
Image block 5
<div class="custom-grid custom-grid--5"> <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x480" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x480" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x480" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x480" /></div> </div>
Image block 6
<div class="custom-grid custom-grid--6"> <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x480" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x480" /></div> </div>
With text 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
<div class="custom-grid custom-grid--2 with-text fill"> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> <div class="custom-grid__item"><img src="http://placehold.it/455x455" /></div> <div class="custom-grid__item"><img src="http://placehold.it/455x455" /></div> </div>
With text 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
<div class="custom-grid custom-grid--3 with-text fill"> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> </div>
With text 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
<div class="custom-grid custom-grid--3 with-text fill"> <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> </div>
With text 2 (reverse)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
<div class="custom-grid custom-grid--3 with-text fill"> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> </div>
With text 3 (reverse)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
<div class="custom-grid custom-grid--3 with-text fill"> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div> </div>
2 linked image blocks
<div class="custom-grid custom-grid--3"> <a class="custom-grid__item" href="http://google.com"> <img src="http://placehold.it/720x360" /> <h2 class="custom-grid__link-text">Title</h2> </a> <a class="custom-grid__item" href="http://google.com"> <img src="http://placehold.it/720x360" /> <h2 class="custom-grid__link-text">Title</h2> </a> </div>
3 linked image blocks
<div class="custom-grid custom-grid--7"> <a class="custom-grid__item" href="http://google.com"> <img src="http://placehold.it/690x500" /> <h2 class="custom-grid__link-text">Title</h2> </a> <a class="custom-grid__item" href="http://google.com"> <img src="http://placehold.it/690x500" /> <h2 class="custom-grid__link-text">Title</h2> </a> <a class="custom-grid__item" href="http://google.com"> <img src="http://placehold.it/690x500" /> <h2 class="custom-grid__link-text">Title</h2> </a> </div>
Layout 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
<div class="custom-grid custom-grid--3 with-text fill"> <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> </div> <div class="custom-grid custom-grid--3 with-text fill"> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> </div> <div class="custom-grid custom-grid--3 with-text fill"> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> </div> <div class="custom-grid custom-grid--1"> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> </div>
Layout 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
<div class="custom-grid custom-grid--4"> <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> </div> <div class="custom-grid custom-grid--3 with-text fill"> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> </div> <div class="custom-grid custom-grid--1"> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> </div> <div class="custom-grid custom-grid--3 with-text fill"> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> </div>
Layout 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
<div class="custom-grid custom-grid--2 with-text fill"> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> <div class="custom-grid__item"><img src="http://placehold.it/455x455" /></div> <div class="custom-grid__item"><img src="http://placehold.it/455x455" /></div> </div> <div class="custom-grid custom-grid--3 with-text fill"> <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> </div> <div class="custom-grid custom-grid--1"> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> </div>
Layout 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
<div class="custom-grid custom-grid--3 with-text fill"> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> </div> <div class="custom-grid custom-grid--1"> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div> </div> <div class="custom-grid custom-grid--3 with-text fill"> <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div> <div class="custom-grid__item"> <div class="text-holder"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> </div> </div> </div>