.main-content
	.catalog-intro
		img(src="http://olivia-ng.com/codepen/product/commitmentshirt.jpg" alt="Catalog Highlight")
		.catalog-intro__info
			h1 The Nerdy Catalog
			h2 
				| Gifting season is near. Find the perfect gifts for your nerdy friends. 
				| Don't have friends? Buy a pillow you can cry into every night.
			button.js-switch-grid Change product grid here!

	.product-grid__wrapper
		.product-grid
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35004674-hello-world?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F35004674&p=classic-tee" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/helloworldpillow.jpg")
				.product-item__name 
					h3 Hello World
					h5 Throw Pillow
			a.product-item(href="https://www.redbubble.com/people/inapt/works/30436607-fries-over-lies?asc=u&grid_pos=12&modal=%2Fboom%2Fb%2FavailableProducts%2F30436607&p=t-shirt&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid&style=racerback" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/iphonefries.jpg")
				.product-item__name 
					h3 Fries Over Lies
					h5 Phone Case
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35033300-50-shades-of-grey?asc=u&grid_pos=4&modal=%2Fboom%2Fb%2FavailableProducts%2F35033300&p=contrast-tank&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/50shadesshirt.jpg")
				.product-item__name 
					h3 50 Shades
					h5 Classic Tee
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35001641-straight-outta-code-camp?asc=u&grid_pos=18&modal=%2Fboom%2Fb%2FavailableProducts%2F35001641&p=lightweight-raglan-sweatshirt&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/straightouttacodecampbook.jpg")
				.product-item__name 
					h3 Code Camp
					h5 Notebook
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35004173-what-is-programming-ver-1?asc=u&grid_pos=14&modal=%2Fboom%2Fb%2FavailableProducts%2F35004173&p=womens-fitted-scoop&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/programmingbook.jpg")
				.product-item__name 
					h3 What is Programming?
					h5 Notebook
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35033300-50-shades-of-grey?asc=u&grid_pos=4&modal=%2Fboom%2Fb%2FavailableProducts%2F35033300&p=contrast-tank&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/50shadesmug.jpg")
				.product-item__name 
					h3 50 Shades
					h5 Mug
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35032913-is-it-a-bug-or-a-feature-cursive-font?asc=u&grid_pos=5&modal=%2Fboom%2Fb%2FavailableProducts%2F35032913&p=t-shirt&rbs=6a4dc08b-d5e1-4bf1-b0c3-886227a2e761&ref=artist_shop_grid&style=pullover" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/bugfeaturehoodie.jpg")
				.product-item__name 
					h3 Bug or Feature?
					h5 Hoodie
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35032799-on-wednesdays-we-wear-pink-cursive-font?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F35032799&p=classic-tee" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/wednesdaystote.jpg")
				.product-item__name 
					h3 Pink Wednesdays
					h5 Tote Bag
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35031724-looking-for-commitment-dark-on-light-version?asc=u&grid_pos=11&modal=%2Fboom%2Fb%2FavailableProducts%2F35031724&p=triblend-tee&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/commitpilow.jpg")
				.product-item__name 
					h3 Looking for Commitment
					h5 Floor Pillow
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35032365-gaming-weekends?asc=u&grid_pos=8&modal=%2Fboom%2Fb%2FavailableProducts%2F35032365&p=chiffon-top&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/weekendgaminglaptopbag.jpg")
				.product-item__name 
					h3 Gaming Weekends
					h5 Laptop Bag
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35253776-youre-not-pizza?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F35253776&p=t-shirt" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/pizzahappymug.jpg")
				.product-item__name 
					h3 You're Not Pizza
					h5 Mug
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35253776-youre-not-pizza?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F35253776&p=t-shirt" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/pizzashirt.jpg")
				.product-item__name 
					h3 You're Not Pizza
					h5 Classic Tee
			a.product-item(href="https://www.redbubble.com/people/inapt/works/30437121-pizza-over-drama-white-on-dark?asc=u&grid_pos=22&modal=%2Fboom%2Fb%2FavailableProducts%2F30437121&p=t-shirt&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid&style=vneck" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/pizzashirt2.jpg")
				.product-item__name 
					h3 Pizza Over Drama
					h5 Tank Top
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35001641-straight-outta-code-camp?asc=u&grid_pos=18&modal=%2Fboom%2Fb%2FavailableProducts%2F35001641&p=lightweight-raglan-sweatshirt&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/straightouttacodecampmug.jpg")
				.product-item__name 
					h3 Code Camp
					h5 Mug
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35032641-work-life-balance?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F35032641&p=classic-tee" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/worklifebalanceclock.jpg")
				.product-item__name 
					h3 Work-Life Balance
					h5 Clock
			a.product-item(href="https://www.redbubble.com/people/inapt/works/30436762-fries-over-lies-white?asc=u&grid_pos=24&modal=%2Fboom%2Fb%2FavailableProducts%2F30436762&p=womens-fitted-v-neck&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/friesshirt.jpg")
				.product-item__name 
					h3 Fries Over Lies
					h5 V-Neck Tee
			a.product-item(href="https://www.redbubble.com/people/inapt/works/30436905-pizza-over-drama?asc=u&grid_pos=23&modal=%2Fboom%2Fb%2FavailableProducts%2F30436905&p=a-line-dress&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/floorpillowpizza.jpg")
				.product-item__name 
					h3 Pizza Over Drama
					h5 Floor Pillow
			a.product-item(href="https://www.redbubble.com/people/inapt/works/14029669-cats-over-brats-version-2?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F14029669&p=classic-tee" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/catsoverbrats.jpg")
				.product-item__name 
					h3 Cats Over Brats
					h5 Long Sleeve Tee
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35031724-looking-for-commitment-dark-on-light-version?asc=u&grid_pos=11&modal=%2Fboom%2Fb%2FavailableProducts%2F35031724&p=triblend-tee&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/commitipad.jpg")
				.product-item__name 
					h3 Looking for Commitment
					h5 Tablet Case
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35031921-looking-for-commitment-dark-on-light-version?asc=u&grid_pos=10&modal=%2Fboom%2Fb%2FavailableProducts%2F35031921&p=t-shirt&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid&style=womens" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/commitmentshirt.jpg")
				.product-item__name 
					h3 Looking for Commitment
					h5 Fitted Tee
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35032799-on-wednesdays-we-wear-pink-cursive-font?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F35032799&p=classic-tee" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/wednesdayspouch.jpg")
				.product-item__name 
					h3 Pink Wednesdays
					h5 Pouch
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35004000-what-is-programming-ver-3?asc=u&grid_pos=15&modal=%2Fboom%2Fb%2FavailableProducts%2F35004000&p=lightweight-hoodie&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/programmingmug.jpg")
				.product-item__name 
					h3 What is Programming?
					h5 Mug
			a.product-item(href="https://www.redbubble.com/people/inapt/works/35032913-is-it-a-bug-or-a-feature-cursive-font?asc=u&grid_pos=5&modal=%2Fboom%2Fb%2FavailableProducts%2F35032913&p=t-shirt&rbs=6a4dc08b-d5e1-4bf1-b0c3-886227a2e761&ref=artist_shop_grid&style=pullover" target="_blank")
				img(src="http://olivia-ng.com/codepen/product/bugfeaturebook.jpg")
				.product-item__name 
					h3 Bug or Feature?
					h5 Notebook
		.button-row
			button.js-switch-grid Change product grid here!

		
aside.context
	.explanation
		| Click on the button to see how awesome 
		code grid-auto-flow: dense
		|  is.
		br
		| Part of the 
		a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS Grid Experiments
		|  collection.

footer
	a(href="https://twitter.com/meowlivia_" target="_blank")
		i.icon-social-twitter.icons
	a(href="https://github.com/oliviale" target="_blank")
		i.icon-social-github.icons
	a(href="https://dribbble.com/oliviale" target="_blank")
		i.icon-social-dribbble.icons
View Compiled

body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}


aside.context {
  text-align: center;
  color: #333;
	line-height: 1.7;
  a {
    text-decoration: none;
    color: #333;
    padding: 3px 0;
    border-bottom: 1px dashed;
  }
  .explanation {
    max-width: 700px;
    margin: 6em auto 0;
  }
}

footer {
  text-align: center;
  margin: 4em auto;
  width: 100%;
  a {
    text-decoration: none;
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: transparent;
		border: 1px dashed #333;
    color: #333;
    margin: 5px;
    &:hover {
      background: rgba(0,0,0,0.05);
    }
    .icons {
      margin-top: 12px;
      display: inline-block;
      font-size: 20px;
    }
  }
}

.main-content {
	position: relative;
	&:before {
		content: '';
		width: 100%;
		height: 12%;
		position: absolute;
		background: linear-gradient(to bottom, #f4f4f4, #fff);
		z-index: -1;
	}
}


button {
		background: #000;
		color: #fff;
		position: relative;
		margin: 2em;
		border: 2px solid #000;
		border-radius: 50px;
		padding: 10px 25px;
		font: 700 18px 'Poppins', sans-serif;
		outline: none;
		cursor: pointer;
		transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
		&:before {
			content: '';
			border-radius: inherit;
			background: rgba(0,0,0,0.2);
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 0;
			opacity: 0;
			transform-origin: center;
		}
		&:hover:before  {
			animation: grow .5s linear;
		}
		&:active {
			top: 2px;
		}
	}
.catalog-intro {
	position: relative;
	overflow: hidden;
	background: #f8f8f8;
	h1 {
		font: italic 900 60px/1 'Playfair Display', serif;
	}
	h2 {
		font: 22px/1.3 'Poppins', sans-serif;
		margin-top: 2em;
		max-width: 500px;
		color: #999;
		margin-left: 2em;
		
	}
	&__info {
		padding: 10em 4em 6em;
		position: relative;
	}
	img {
	 position: absolute;
		height: 110%;
		top: -3em;
		right: -10em;
		z-index: 0;
	}
}

@keyframes grow {
	0% {opacity: 0;}
  50% { opacity: .5; }
	100% { opacity: 0; height: 155%; transform: scale(1.15);}
}

code {
	border: .5px solid #ddd;
    font-family: monospace;
    display: inline-block;
    margin: 0 2px;
    vertical-align: middle;
    padding: 0px 6px;
    border-radius: 3px;
    background: #f8f8f8;
    color: purple;
}

.product-grid__wrapper {
	position: relative;
}
.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
	grid-template-rows: repeat(auto-fill, minmax(180px,1fr));
  grid-auto-flow: dense;
	grid-gap: 20px;
	padding: 0 20px;
}

.product-item {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	padding-bottom: 100px;
	transition: .2s ease;
	color: #000;
	img {
		height: 100%;
    width: 100%;
    object-fit: cover;
	}
	&__name {
		position: absolute;
		top: 100%;
		margin-top: -100px;
		width: 100%;
    padding: 15px 0;
		text-align: center;
		background: #fff;
		h3 {
			font: 900 24px/1.1 'Playfair Display', sans-serif;
			margin: 0;
		}
		h5 {
			font: 300 14px/1.2 'Poppins', sans-serif;
			text-transform: uppercase;
			letter-spacing: 2px;
			color: #999;
			margin: 10px 0 0;

		}
	}
}

.button-row {
	position: sticky;
	bottom: -50px;
	grid-column: 100%;
	grid-row: 100%;
	opacity: 0;
	transition: .3s ease;
	background: #fff;
	padding: 15px;
	text-align: center;
	box-shadow: 0 -3px 8px rgba(0,0,0,0.05);
	&.sticky {
		opacity: 1;
		bottom: 0;
	}
	button {
		margin: 0;
		font-size: 14px;
		padding: 8px 15px;
	}
}

@media screen and (min-width:1024px) {
	.catalog-intro__info {
		margin-left: 10%;
	}
}

@media screen and (max-width:768px) {
	.catalog-intro {
		text-align: center;
		h2 {
			margin: 1em auto 0;
		}
		img, button {
			display: none;
		}
	}
	.button-row {
		display: none;
	}
}
$(document).ready(function() {
	switchGrid();
});

$(window).resize(function() {
	if ($(window).width() < 768) {
		$(".product-item").removeAttr("style");
	}
});

$(".js-switch-grid").on("click", function() {
	switchGrid();
});

function switchGrid() {
	if ($(window).width() > 768) {
		$(".product-item").each(function() {
			var size = 1 + Math.floor(Math.random() * 3);
			$(this).css({
				"grid-column": "span " + size,
				"grid-row": "span " + size
			});
		});
	}
}

$(function() {
    //caches a jQuery object containing the header element
    var buttonRow = $(".button-row");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            buttonRow.addClass("sticky");
        } else {
            buttonRow.removeClass("sticky");
        }
    });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js