cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- 
For CSS Grid expertise:
Rachel Andrew: https://gridbyexample.com/
Jen Simmons: http://labs.jensimmons.com/
 -->
		<div id="sorting" class="topgrid">
			<div>
				<p>A masonry style layout using CSS Grid and JavaScript.</p>
				<p>'grid-row-end' property of each grid item is dynamically set to match height of content. Heights recalculated once images load using <a href="https://imagesloaded.desandro.com/"> imagesLoaded.js</a>.</p>
        <p>This won't work in <a href="http://caniuse.com/#feat=css-grid">browsers that don't yet support CSS Grid</a>. </p>
        <p>Rachel Andrew has <a href="https://gridbyexample.com/">Everything you need to learn CSS Grid Layout</a></p>         
        
			</div>
			<div><p><a href="javascript:randomiseOrder();">Randomise</a> order of content.</p>
<p><div class="tooltip">Row height [?]: <span class="tooltiptext">A larger row height means more white space at the bottom of grid elements but tighter grid packing.</span>
</div> <span id="rowtext">20</span>
				<input id="drawspeed"  type="range" name="drawspeed" min="20" max="160" step="20" value="20" oninput="setRowHeight(this.value)" onchange="setRowHeight(this.value)"><br></p>
				<p><div class="tooltip">Variety of item width [?]: <span class="tooltiptext">Having all items the same width allows perfect packing.</span>
</div> <input type="radio" name="widths" value="1" onchange="changeWidth(1);" checked> 1 | <input type="radio" name="widths" value="2" onchange="changeWidth(2);"> 2 | <input type="radio" name="widths" value="3" onchange="changeWidth(3);"> 3</p>
				<p><div class="tooltip">Grid fill [?]: <span class="tooltiptext">Dense packing ensures the least number of gaps but changes the order of the items.</span>
</div> 
					<input type="radio" name="fill" value="dense" onchange="changeFill('dense');" checked> Dense | <input type="radio" name="fill" value="row" onchange="changeFill('row');"> Row<br></p>
			</div>
		</div>


<div id="grid" class="grid">


<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>1: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br></p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>2: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog1.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit ame</p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>3: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog2.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, conse</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>4: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog3.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br></p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>5: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog1.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a eros at varius. Nunc at leo finibus nisi varius scelerisque at ac enim. Donec a sagittis dolor. Mauris mi urna, rhoncus fringilla felis nec, fermentum ullamcorper est. Vestibulum </p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>6: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog1.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dol</p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>7: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog10.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing e</p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>8: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog7.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>9: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog4.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a eros at varius. Nunc at leo finibus nisi varius scelerisque at ac enim. Donec a sagittis dolor. Mauris mi urna, rhoncus fringilla felis nec, fermentum ullamcorper est. Vestibulum iaculis eros </p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>10: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog8.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit ame</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>11: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog4.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a eros at varius. Nunc at leo finibus nisi varius scelerisque at ac enim. Donec a sagittis dolor. Mauris mi urna, rhoncus fringilla felis nec, fermentum ullamcorper est. Vestibulum iaculis</p></div></div></div></div>
<div class="griditem blog type5"><div class="gridcontent"><div class="gridTitle"><h3>12: Type 5</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris ma</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>13: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog4.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam si</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>14: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog5.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at </p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>15: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis c</p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>16: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog3.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipisci</p></div></div></div></div>
<div class="griditem instagram type2"><div class="gridcontent"><div class="gridTitle"><h3>17: Type 2</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog7.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolo</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>18: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifen</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>19: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog3.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. S</p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>20: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog5.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, co</p></div></div></div></div>
<div class="griditem blog type5"><div class="gridcontent"><div class="gridTitle"><h3>21: Type 5</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis l</p></div></div></div></div>
<div class="griditem blog type5"><div class="gridcontent"><div class="gridTitle"><h3>22: Type 5</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a ero</p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>23: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog7.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>24: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog1.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing</p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>25: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog3.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet</p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>26: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog3.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, cons</p></div></div></div></div>
<div class="griditem instagram type2"><div class="gridcontent"><div class="gridTitle"><h3>27: Type 2</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog9.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adi</p></div></div></div></div>
<div class="griditem instagram type2"><div class="gridcontent"><div class="gridTitle"><h3>28: Type 2</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog5.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor </p></div></div></div></div>
<div class="griditem instagram type2"><div class="gridcontent"><div class="gridTitle"><h3>29: Type 2</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog2.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor</p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>30: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog5.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit am</p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>31: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog2.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></div></div></div></div>
<div class="griditem blog type5"><div class="gridcontent"><div class="gridTitle"><h3>32: Type 5</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper u</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>33: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog1.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a eros at varius. Nunc at leo finibus nisi varius sceleri</p></div></div></div></div>
<div class="griditem blog type5"><div class="gridcontent"><div class="gridTitle"><h3>34: Type 5</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit element</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>35: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>36: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobort</p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>37: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog8.jpg"></a><div class="gridDesc"><div><p>Lorem ipsu</p></div></div></div></div>
<div class="griditem instagram type2"><div class="gridcontent"><div class="gridTitle"><h3>38: Type 2</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog5.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit a</p></div></div></div></div>
<div class="griditem blog type5"><div class="gridcontent"><div class="gridTitle"><h3>39: Type 5</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>40: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus </p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>41: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog2.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a eros at varius. Nunc at leo finibus nisi varius scelerisque at ac enim. Donec a sagittis dolor. Mauris mi urna, rhoncus fringilla felis nec, fermentum ullamcorper est. Vestibulum iac</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>42: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, s</p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>43: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog5.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consect</p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>44: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog6.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestib</p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>45: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog2.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adi</p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>46: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog8.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam.</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>47: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog3.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed t</p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>48: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog3.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a eros at varius. Nunc at leo finib</p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>49: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog7.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elem</p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>50: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog1.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a eros at varius. Nunc at leo finibus nisi varius scelerisque at ac </p></div></div></div></div>
<div class="griditem instagram type2"><div class="gridcontent"><div class="gridTitle"><h3>51: Type 2</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog7.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consecte</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>52: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a eros at vari</p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>53: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog9.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolo</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>54: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog7.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a eros at varius. Nunc at leo finibus nisi varius scelerisque at ac enim. Donec a sagittis dolor. Mauris mi urna, rhoncus fringilla </p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>55: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog2.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. F</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>56: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh loborti</p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>57: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog8.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipis</p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>58: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog1.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consec</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>59: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum fel</p></div></div></div></div>
<div class="griditem instagram type2"><div class="gridcontent"><div class="gridTitle"><h3>60: Type 2</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog1.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum d</p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>61: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog2.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>62: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit ame</p></div></div></div></div>
<div class="griditem instagram type2"><div class="gridcontent"><div class="gridTitle"><h3>63: Type 2</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog5.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit </p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>64: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis ni</p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>65: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog5.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida or</p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>66: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog9.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae plac</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>67: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog6.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibul</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>68: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. </p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>69: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog9.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commod</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>70: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel fau</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>71: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog10.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a eros at varius. Nunc at leo finibus nisi varius scelerisque</p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>72: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog2.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vi</p></div></div></div></div>
<div class="griditem blog type5"><div class="gridcontent"><div class="gridTitle"><h3>73: Type 5</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum,</p></div></div></div></div>
<div class="griditem blog type5"><div class="gridcontent"><div class="gridTitle"><h3>74: Type 5</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci c</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>75: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor</p></div></div></div></div>
<div class="griditem instagram type2"><div class="gridcontent"><div class="gridTitle"><h3>76: Type 2</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog7.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, cons</p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>77: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog2.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec </p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>78: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog9.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>79: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog4.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a eros at varius. Nunc at leo finibus nisi varius scelerisque at ac enim. Donec a sagittis dol</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>80: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog6.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>81: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog3.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean ve</p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>82: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog1.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>83: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, soll</p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>84: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog4.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor </p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>85: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog2.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit</p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>86: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog10.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>87: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog6.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipi</p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>88: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog5.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing </p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>89: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo </p></div></div></div></div>
<div class="griditem instagram type1"><div class="gridcontent"><div class="gridTitle"><h3>90: Type 1</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog6.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetu</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>91: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog5.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida d</p></div></div></div></div>
<div class="griditem blog type5"><div class="gridcontent"><div class="gridTitle"><h3>92: Type 5</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobor</p></div></div></div></div>
<div class="griditem blog type5"><div class="gridcontent"><div class="gridTitle"><h3>93: Type 5</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempu</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>94: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog4.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec mo</p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>95: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog1.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum </p></div></div></div></div>
<div class="griditem instagram type3"><div class="gridcontent"><div class="gridTitle"><h3>96: Type 3</h3></div><img class="instthumb" src="https://www.andybarefoot.com/codepen/images/dogs/dog7.jpg"></a><div class="gridDesc"><div><p>Lorem ipsum </p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>97: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog8.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis</p></div></div></div></div>
<div class="griditem project type6"><div class="gridcontent"><div class="gridTitle"><h3>98: Type 6</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog5.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices</p></div></div></div></div>
<div class="griditem blog type4"><div class="gridcontent"><div class="gridTitle"><h3>99: Type 4</h3></div><div class="gridDesc"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet vol</p></div></div></div></div>
<div class="griditem project type7"><div class="gridcontent"><div class="gridTitle"><h3>100: Type 7</h3></div><div class="gridDesc"><img src="https://www.andybarefoot.com/codepen/images/dogs/dog2.jpg"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis fringilla laoreet. Mauris mattis enim ut felis consectetur, vitae lacinia enim auctor. Aenean vitae fermentum odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum non orci ut dignissim. Fusce fermentum felis aliquam, mattis nibh ut, faucibus leo. Sed lectus libero, volutpat at eros quis, venenatis tempus neque. Nulla vel faucibus orci, nec convallis ligula. Quisque maximus gravida orci, in lacinia mauris pretium nec. Sed et enim bibendum, fermentum tellus eu, eleifend ex. Aliquam lectus magna, sollicitudin vitae placerat ac, semper ut risus. Nunc vestibulum lacus et nulla volutpat auctor.<br><br>Aenean vel commodo quam. Donec vulputate dolor vitae velit elementum, at mattis nibh lobortis. Donec molestie magna lobortis felis vestibulum ultrices. Nam sit amet volutpat felis, eget gravida diam. Sed tincidunt metus a tortor tempus, a gravida orci consectetur. Donec suscipit a eros at varius. Nunc at leo finibus nisi varius scelerisque at ac enim. Donec a sagittis dolor. Mauris mi urna, rhoncus fringilla felis nec, fermentu</p></div></div></div></div>
	
	
		</div>



            
          
!
            
              			body {
				margin: 10px;
				color: #374046;
				background-color: #374046;
				font-family: 'Open Sans Condensed', sans-serif;
				font-size: 1.15em;
				text-rendering: optimizeLegibility;
				-webkit-font-smoothing: antialiased;
			}
			a {
				color: #374046;
			}
			h1{
				font-size: 1.3em;
				margin-bottom: 20px;
			}
			.topgrid {
				display: grid;
				grid-gap: 10px;
				grid-template-columns: repeat(auto-fill, minmax(350px,1fr));
			}
			.grid {
				display: grid;
				grid-gap: 10px;
				grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
				grid-auto-rows: 20px;
				grid-auto-flow: dense;
			}
			.griditem {
				background-color: #ffffff;
				visibility: hidden;
			}
			.project {
				grid-column-end: span 1;
				grid-row-end: span 1;
			}
			.blog {
				grid-column-end: span 1;
				grid-row-end: span 1;
			}
			.instagram {
				grid-column-end: span 1;
				grid-row-end: span 1;
			}
			.instthumb{
				width: 100%;
			}
			.gridTitle {
				padding: 20px;
			}
			.gridTitle h3{
				font-size: 1.2em;
				color: #ffffff;
				text-transform: uppercase;
				display: inline-block;
			}
			.type1 .gridTitle{
				background-color: #607D8B;
			}
			.type2 .gridTitle{
				background-color: #ff9800;
			}
			.type3 .gridTitle{
				background-color: #f44336;
			}
			.type4 .gridTitle {
				background-color: #9c27b0;
			}
			.type5 .gridTitle {
				background-color: #3f51b5;
			}
			.type6 .gridTitle {
				background-color: #03a9f4;
			}
			.type7 .gridTitle {
				background-color: #009688;
			}
			.gridDesc{
				padding: 10px 10px 5px 10px;
			}
			.gridDesc img{
				width: 50%;
				margin: 0 10px 10px 0;
				float: left;
			}
			.gridDesc p{
				margin-bottom: 10px;
			}
			#sorting {
        font-size: 0.9em;
				text-align: center;
				background-color: #ffffff;
				margin-bottom: 10px;
				padding: 10px;
			}
			#sorting p{
				margin-bottom: 8px;
			}
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

            
          
!
            
              			function randomiseOrder(){
				var toSort = document.getElementById("grid").children;
				toSort = Array.prototype.slice.call(toSort, 0);
				toSort.sort(function(a, b) {
					if(Math.random()<0.5){
						return 1;
					}else{
					    return -1;
					}
				});
				document.getElementById("grid").innerHTML = "";
				for(var i = 0, l = toSort.length; i < l; i++) {
				    document.getElementById("grid").appendChild(toSort[i]);
				}

			}
			function resizeAllGridItems(){
				allItems = document.getElementsByClassName("griditem");
				for(x=0;x<allItems.length;x++){
					resizeGridItem(allItems[x]);
				}
			}

			function resizeInstance(instance){
				item = instance.elements[0];
				resizeGridItem(item);
			}

			function resizeGridItem(item){
				rowHeight = 0;
				contentHeight = 1;
				gridHeight = 0;
				while(contentHeight > gridHeight){
					rowHeight++;
					item.style.gridRowEnd = "span "+rowHeight;
					item.style.visibility = "visible";
					contentHeight = item.querySelector('.gridcontent').getBoundingClientRect().height; 
					gridHeight = item.getBoundingClientRect().height; 
				}
			}

			function setRowHeight(height){
				document.getElementById("grid").style.gridAutoRows = height+"px";
				document.getElementById('rowtext').textContent = height;
				resizeAllGridItems();
			}

			function changeWidth(i){
				if(i==1){
					document.getElementById("grid").style.gridAutoRows = height+"px";
					pWidth = 1;
					bWidth = 1;
					iWidth = 1;
				}else if(i==2){
					document.getElementById("grid").style.gridTemplateColumns = "repeat(auto-fill, minmax(160px,1fr))";
					pWidth = 2;
					bWidth = 2;
					iWidth = 1;
				}else if(i==3){
					document.getElementById("grid").style.gridTemplateColumns = "repeat(auto-fill, minmax(120px,1fr))";
					pWidth = 2;
					bWidth = 3;
					iWidth = 1;
				}
				allProjects = document.getElementsByClassName("project");
				for(x=0;x<allProjects.length;x++){
					allProjects[x].style.gridColumnEnd = "span "+pWidth;
				}
				allBlogs = document.getElementsByClassName("blog");
				for(x=0;x<allBlogs.length;x++){
					allBlogs[x].style.gridColumnEnd = "span "+bWidth;
				}
				allInst = document.getElementsByClassName("instagram");
				for(x=0;x<allInst.length;x++){
					allInst[x].style.gridColumnEnd = "span "+iWidth;
				}
				resizeAllGridItems();
			}

			function changeFill(order){
				document.getElementById("grid").style.gridAutoFlow = order;
        resizeAllGridItems();
			}

			// MANAGE ROW SIZE OF GRID ITEMS  
			// resize all the grid items to fit text
			resizeAllGridItems();
			// resize individual grid items once their images have loaded
			allItems = document.getElementsByClassName("griditem");
			for(x=0;x<allItems.length;x++){
				imagesLoaded( allItems[x], resizeInstance);
			}
			// add function to window resize
			window.addEventListener("resize", resizeAllGridItems);

            
          
!
999px
Loading ..................

Console