Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                - 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>.
              
            
!

CSS

              
                $w: minmax(Min(20em, 100%), 1fr);
$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: '🏷️'
	}
}
              
            
!

JS

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

if(grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') {
	let o = new ResizeObserver(entries => {
		entries.forEach(entry => {
			grids.find(grid => grid._el === entry.target.parentElement).mod = 1
		});
	});
	
	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 || grid.mod) {
				/* 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`
					})
				}
				
				grid.mod = 0
			}
		})
	}

	addEventListener('load', e => {
		layout(); /* initial load */
		grids.forEach(grid => { grid.items.forEach(c => o.observe(c)) })
		addEventListener('resize', layout, false) /* on resize */
	}, false)
}
              
            
!
999px

Console