- let data = [
- 	{
- 		name: 'Gingerbread', 
- 		date: '21st of July 2020', 
- 		tags: ['ginger', 'cloves', 'nutmeg', 'cinnamon', 'honey'], 
- 		text: 'Tiramisu biscuit liquorice dragée tootsie roll. Marzipan soufflé donut bonbon powder. Sugar plum chocolate bar donut cake marzipan biscuit liquorice liquorice. Muffin brownie chocolate cake biscuit. Soufflé cookie pastry jelly beans pudding. Oat cake cupcake cheesecake tootsie roll. Croissant wafer caramels. Lollipop macaroon gingerbread pudding.'
- 	}, 
- 	{
- 		name: 'Macaron', 
- 		date: '4th of June 2020', 
- 		tags: ['egg whites', 'sugar', 'almond', 'cream'], 
- 		text: 'Tart jelly-o pastry. Marshmallow brownie icing tart. Sugar plum brownie sugar plum tootsie roll liquorice lemon drops croissant. Dragée pudding jelly-o chocolate jelly-o brownie marshmallow.'
- 	}, 
- 	{
- 		name: 'Lava cake', 
- 		date: '23rd of May 2020', 
- 		tags: ['chocolate', 'cake', 'gooey', 'moist'], 
- 		text: 'Cheesecake marzipan chocolate bar lollipop. Sweet roll oat cake powder brownie chupa chups gingerbread wafer wafer. Tiramisu cheesecake fruitcake cake. Jelly beans dessert fruitcake carrot cake ice cream.'
- 	}, 
- 	{
- 		name: 'Salted caramel truffles', 
- 		date: '2nd of May 2020', 
- 		tags: ['salted caramel', 'truffle'], 
- 		text: 'Fruitcake jelly chocolate cake croissant donut pastry cookie jelly beans gingerbread. Candy canes macaroon dragée jelly beans tootsie roll icing jelly fruitcake tiramisu. Lemon drops wafer jujubes. Tootsie roll caramels chocolate cake sugar plum cookie biscuit tootsie roll apple pie cake. Marzipan pudding cake. Carrot cake ice cream chocolate bar toffee apple pie toffee.'
- 	}, 
- 	{
- 		name: 'Lemon ice cream', 
- 		date: '8th of April 2020', 
- 		tags: ['ice cream', 'lemon', 'cooling'], 
- 		text: 'Wafer lollipop sugar plum. Candy chupa chups sweet roll. Cookie dessert marshmallow apple pie brownie tiramisu cookie candy. Jujubes bonbon danish cotton candy bonbon croissant cheesecake jelly-o icing. Carrot cake marshmallow jelly candy. Carrot cake pie lollipop sweet roll sweet roll ice cream caramels cheesecake chupa chups. Sugar plum lemon drops tiramisu pie. Chocolate gummies jelly-o. Fruitcake halvah dessert marshmallow jelly-o cake.'
- 	}, 
- 	{
- 		name: 'Brownie', 
- 		date: '20th of March 2020', 
- 		tags: ['pecan', 'chocolate', 'caramel', 'moist'], 
- 		text: 'Liquorice muffin dessert toffee tootsie roll tiramisu. Lollipop gummi bears bonbon. Gummies gummi bears brownie muffin gingerbread. Cheesecake chocolate bar brownie. Tiramisu wafer cotton candy bonbon. Soufflé wafer jelly dragée candy cake gummi bears gingerbread dessert. Gummies cupcake lollipop soufflé biscuit icing sweet. Tart cake chupa chups gingerbread cake. Powder bonbon lollipop lollipop marzipan fruitcake.'
- 	}, 
- 	{
- 		name: 'Apple pie', 
- 		date: '17th of February 2020', 
- 		tags: ['pie', 'apple', 'moist'], 
- 		text: 'Lollipop cheesecake sugar plum macaroon fruitcake. Powder muffin jelly beans carrot cake sweet roll gingerbread powder. Brownie brownie carrot cake gummi bears cotton candy cookie candy topping topping.'
- 	}
- ]

body.grid--masonry
	- data.forEach(o => {
		article
			header
				h3 #{o.name}
				time.breakout #{o.date}
				div.tags
					- o.tags.forEach(t => {
						a.tag(href='#') #{t}
					- })
			section #{o.text}
			footer.breakout
				a.more(href='#') more
	- });
	
	p Demo created for my CSS-Tricks article <a href="https://css-tricks.com/a-lightweight-masonry-solution/">A Lightweight Masonry Solution</a> - make sure you check it out!<br>All demos created for this article can be found in <a href="https://codepen.io/collection/DYRJxR">this collection</a>.

$w: Min(20em, 100%);
$s: .5em;

/* basic reset */
* {
	box-sizing: inherit;
	margin: 0
}

/* basic masonry styles - same as for the image grid */
.grid--masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, $w);
	grid-template-rows: masonry;
	justify-content: center;
	grid-gap: $s;
	padding: $s;
	
	> * { align-self: start }
	
	> :first-child { grid-column: 1/ -1 }
}

/* prettifying styles */
html {
	box-sizing: border-box;
	background: 
		linear-gradient(to left top, #555, #959595) fixed;
	color: #ddd;
	font: 1em/ 1.375 exo, trebuchet ms, sans-serif
}

body {
	margin: 0 auto;
	padding: 0 2vmin;
	max-width: 80em
}

article {
	position: relative;
	background: linear-gradient(to left top, #1c1c1c, #222)
}

header, section, footer { padding: 2vmin }

header { border-bottom: solid 1px #000 }

section { border-top: solid 1px #363636 }

footer { text-align: right }

time { font-size: .875em }

a {
	display: inline-block;
	color: #fadd6a;
	text-decoration: none
}

.tag {
	display: inline-block;
	margin-right: 2vmin;
	font-size: .875em;

	&::before {
		margin-right: .25em;
		content: '🏷️'
	}
}

let grids = [...document.querySelectorAll('.grid--masonry')];

if(grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') {
	grids = grids.map(grid => ({
		_el: grid, 
		gap: parseFloat(getComputedStyle(grid).gridRowGap), 
		items: [...grid.childNodes].filter(c => c.nodeType === 1 && +getComputedStyle(c).gridColumnEnd !== -1), 
		ncol: 0
	}));

	function layout() {
		grids.forEach(grid => {
			/* get the post relayout number of columns */
			let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length;

			/* if the number of columns has changed */
			if(grid.ncol !== ncol) {
				/* update number of columns */
				grid.ncol = ncol;

				/* revert to initial positioning, no margin */
				grid.items.forEach(c => c.style.removeProperty('margin-top'));

				/* if we have more than one column */
				if(grid.ncol > 1) {
					grid.items.slice(ncol).forEach((c, i) => {
						let prev_fin = grid.items[i].getBoundingClientRect().bottom /* bottom edge of item above */, 
								curr_ini = c.getBoundingClientRect().top /* top edge of current item */;
						
						c.style.marginTop = `${prev_fin + grid.gap - curr_ini}px`
					})
				}
			}
		})
	}

	addEventListener('load', e => {
		layout(); /* initial load */
		addEventListener('resize', layout, false) /* on resize */
	}, false);
}