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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <main>
  <h1 data-supported>Look at them bricks!</h1>
  <section class="masonry__wall">
    <article class="massonry__brick card">
      <h2 class="card__heading">Eccles cake</h2>
      <p class="card__body">Cake lemon drops gummies carrot cake. Gummies marzipan powder. Biscuit tootsie roll muffin bonbon biscuit jelly jelly-o. Ice cream chupa chups caramels. Macaroon lollipop jujubes. Apple pie halvah sweet roll. Ice cream jelly beans gummi bears. Muffin oat cake tootsie roll bear claw muffin icing marzipan dragée. Chocolate marzipan lollipop tootsie roll muffin powder apple pie candy. Bear claw gingerbread jelly-o chocolate bar. Jelly-o jelly-o marshmallow. Cake pudding pudding macaroon oat cake.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Cranachan</h2>
      <p class="card__body">Danish liquorice caramels cupcake dragée tootsie roll cake. Wafer bear claw dessert dragée wafer toffee jujubes lemon drops jelly-o. Cookie fruitcake dessert cookie. Sugar plum macaroon apple pie apple pie cupcake sweet jelly wafer croissant.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Bread pudding</h2>
      <p class="card__body">Carrot cake toffee dessert donut. Apple pie ice cream macaroon. Lollipop caramels ice cream apple pie gummies ice cream jelly beans. Danish muffin apple pie marzipan. Jelly oat cake cheesecake tiramisu sugar plum powder chupa chups toffee tiramisu. Chocolate soufflé lollipop jelly beans lemon drops chupa chups. Cupcake gummies sweet cake cake cookie cotton candy chocolate bar. Topping icing sesame snaps sesame snaps tootsie roll dessert halvah.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Banoffee pie</h2>
      <p class="card__body">Gummies jujubes topping. Marzipan lollipop toffee topping chocolate cake chocolate danish lemon drops cake. Candy powder marshmallow. Donut chupa chups donut topping sugar plum toffee. Sweet jelly pudding dessert brownie chocolate bar marshmallow. Cake cookie cookie dessert sugar plum. Jujubes lemon drops macaroon powder cotton candy cake macaroon tart. Pie lemon drops ice cream sweet icing. Tiramisu gummi bears tart sesame snaps chupa chups croissant gummi bears. Brownie brownie carrot cake cotton candy bear claw macaroon.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Apple pie</h2>
      <p class="card__body">Jujubes biscuit sweet roll pudding marzipan. Bonbon brownie sweet dragée. Marzipan candy fruitcake chocolate bar. Cheesecake dragée lemon drops ice cream tiramisu. Bear claw sweet roll cake toffee fruitcake bonbon lemon drops dessert sesame snaps. Tart dragée marzipan chocolate cake pudding sugar plum cake. Sesame snaps macaroon candy canes pudding. Marshmallow sweet roll jelly beans sugar plum cake sesame snaps sweet bonbon biscuit. Chocolate tiramisu chupa chups jujubes candy liquorice jelly-o oat cake. Icing jelly-o candy canes candy croissant lollipop. Oat cake tiramisu ice cream jelly beans dragée donut fruitcake jelly beans. Soufflé halvah sweet roll sugar plum sesame snaps oat cake. Wafer ice cream apple pie jelly-o jelly beans pie oat cake jelly.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Sorbet</h2>
      <p class="card__body">Tart tiramisu marshmallow tootsie roll marzipan danish. Cupcake sesame snaps powder sesame snaps apple pie tiramisu bonbon chocolate cake. Marzipan halvah cake donut liquorice cheesecake topping candy canes cotton candy.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Flan</h2>
      <p class="card__body">Tart tiramisu bear claw lemon drops. Jelly beans chocolate cake. Icing danish cake sugar plum pie. Jujubes danish bonbon tootsie roll bear claw jelly. Pie chocolate sesame snaps pudding candy liquorice. Topping dessert biscuit bonbon cotton candy dessert cake toffee. Brownie marzipan chocolate bar. Chupa chups sesame snaps gummies donut halvah. Pastry pastry bear claw oat cake cheesecake lemon drops gummies bonbon. Jujubes cake gummi bears halvah powder danish.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Ambrosia</h2>
      <p class="card__body">Jelly croissant cookie sugar plum donut soufflé. Sweet gingerbread dragée. Dragée jujubes donut. Halvah biscuit jujubes brownie. Jujubes caramels halvah chocolate halvah lollipop wafer gingerbread. Cookie sesame snaps cake cupcake. Pastry cheesecake chocolate cake cake cotton candy danish chocolate. Pie lemon drops tart danish brownie sweet roll. Dessert croissant oat cake fruitcake candy canes tiramisu. Icing tiramisu topping. Liquorice topping cupcake marshmallow ice cream apple pie. Chocolate gummies apple pie toffee icing danish wafer sweet. Caramels soufflé croissant macaroon.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Jalebi</h2>
      <p class="card__body">Cake powder halvah jelly beans marshmallow cupcake bear claw macaroon ice cream. Jelly beans ice cream wafer. Sweet soufflé liquorice tiramisu. Pastry chocolate gummies icing candy canes. Sweet apple pie jujubes oat cake. Biscuit chocolate bar carrot cake tiramisu sweet candy canes brownie cake powder. Icing chocolate cake dragée candy canes tart bear claw apple pie. Lollipop apple pie lollipop ice cream sesame snaps brownie ice cream. Danish cake donut macaroon cake.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Floating island</h2>
      <p class="card__body">Tart tiramisu sweet oat cake pastry tootsie roll sweet roll candy. Chocolate cake halvah cake pastry. Jelly jelly tootsie roll cupcake gummies jelly cake bear claw. Lemon drops gummi bears toffee ice cream gummi bears bonbon lollipop lemon drops. Pastry oat cake cupcake dragée marshmallow candy biscuit. Halvah topping macaroon gummies sesame snaps. Sweet sesame snaps soufflé candy tiramisu sesame snaps. Apple pie candy bonbon cake gingerbread. Caramels brownie soufflé macaroon gingerbread sugar plum liquorice. Powder cake candy canes brownie cheesecake muffin. Bonbon gingerbread macaroon. Oat cake cake marzipan tootsie roll. Bear claw candy croissant macaroon ice cream sweet pudding. Chocolate cake gummies icing chocolate cake gummi bears chocolate jelly-o toffee.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Item 6</h2>
      <p class="card__body">Tart tiramisu marshmallow tootsie roll marzipan danish. Cupcake sesame snaps powder sesame snaps apple pie tiramisu bonbon chocolate cake. Marzipan halvah cake donut liquorice cheesecake topping candy canes cotton candy.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Item 7</h2>
      <p class="card__body">Tart tiramisu bear claw lemon drops. Jelly beans chocolate cake. Icing danish cake sugar plum pie. Jujubes danish bonbon tootsie roll bear claw jelly. Pie chocolate sesame snaps pudding candy liquorice. Topping dessert biscuit bonbon cotton candy dessert cake toffee. Brownie marzipan chocolate bar. Chupa chups sesame snaps gummies donut halvah. Pastry pastry bear claw oat cake cheesecake lemon drops gummies bonbon. Jujubes cake gummi bears halvah powder danish.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Item 3</h2>
      <p class="card__body">Carrot cake toffee dessert donut. Apple pie ice cream macaroon. Lollipop caramels ice cream apple pie gummies ice cream jelly beans. Danish muffin apple pie marzipan. Jelly oat cake cheesecake tiramisu sugar plum powder chupa chups toffee tiramisu. Chocolate soufflé lollipop jelly beans lemon drops chupa chups. Cupcake gummies sweet cake cake cookie cotton candy chocolate bar. Topping icing sesame snaps sesame snaps tootsie roll dessert halvah.</p>
    </article>
    <article class="massonry__brick card">
      <h2 class="card__heading">Item 4</h2>
      <p class="card__body">Gummies jujubes topping. Marzipan lollipop toffee topping chocolate cake chocolate danish lemon drops cake. Candy powder marshmallow. Donut chupa chups donut topping sugar plum toffee. Sweet jelly pudding dessert brownie chocolate bar marshmallow. Cake cookie cookie dessert sugar plum. Jujubes lemon drops macaroon powder cotton candy cake macaroon tart. Pie lemon drops ice cream sweet icing.</p>
    </article>
  </section>
</main>
              
            
!

CSS

              
                // Possible values
// --masonry-gap (<length>) : This is the length between masonry bricks
// REQUIRED One or the other, not both.
// --masonry-columns (<number> | auto): This is the number of fixed columns 
// --masonry-column-width (<length>): This is the max-width of any given column

// If it's not supported, then it'll default to CSS Grid

@supports (display: layout(test)) {
	.masonry__wall {
		display: layout(masonry);
		--masonry-gap: 16px;
		--masonry-column-max-width: 450px;
	}
  
  main h1 {
    margin-left: 16px;
    margin-bottom: 0;
  }
}

.masonry__wall {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 16px;
}







































// Reset Stuff

html {
  font-size: 16px;
  line-height: 24px;
}

body, .article {
	font-family: 'Operator Mono';
	font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
}

h1, .h1 {
  font-family: 'Bitter';
  font-size: 3.375rem;
  line-height: 4.5rem;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

h2, .h2 {
  font-family: 'Bitter';
  font-size: 2.25rem;
  line-height: 3rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

p, ul, ol, pre, table, blockquote {
  margin-top: 0rem;
  margin-bottom: 1.5rem;
}

small {
  font-size: 0.6em;
}

// Basic Styling
:root {
  --pink: #ff48c4;
  --blue: #2bd1fc;
  --yellow: #f3ea5f;
  --purple: #aa3de0;
  --red: #ff3f3f;

  --body-background-color: var(--blue);
  --body-font-color: #000000;
	--card-background-color: #ecf9fd;
}

::selection {
	color: var(--body-font-color);
	background-color: var(--pink);
}

body {
	background-color: var(--body-background-color);
	padding: 0 48px;
	color: var(--body-font-color);
}

.masonry__wall {
  counter-reset: cards;
}

.card {
	position: relative;
	padding: 8px 16px;
	background: var(--card-background-color);
	border: 2px solid currentColor;
	box-shadow: -4px 4px 0px var(--yellow);
	border-top-right-radius: 16px;
}

.card__heading {
	counter-increment: cards;
	position: relative;
	text-transform: uppercase;
	color: var(--purple);
	font-size: 20px;
	line-height: 2em;
	margin: 0 0 8px;
}

.card__heading::before {
	content: counter(cards) ".";
	display: inline-block;
	margin-right: 8px;
}

.card__heading::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 25%;
	height: 2px;
	background-color: currentColor;
}

.card__body {
	color: #000000DE;
	margin: 0;
}

@supports not (display: layout(test)) {
  .masonry__wall {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 16px;
  }
  
  main h1 {
    color: var(--red);
  }
}
              
            
!

JS

              
                const MasonryLayoutInitializer = () => {
  if ('layoutWorklet' in CSS && 'registerLayout' in CSS) {
    console.log('supported');
    // Load Masonry Layout Module
    // This is the other pen associated with this
    CSS.layoutWorklet.addModule('https://codepen.io/MrGrigri/pen/ZqmLgV.js');
    
    // Set Custom CSS Variables
    CSS.registerProperty({
		  name: '--masonry-gap',
      syntax: '<length>',
      inherits: false,
      initialValue: 0
    });

    CSS.registerProperty({
      name: '--masonry-columns',
      syntax: '<number> | auto',
      inherits: false,
      initialValue: 'auto',
    });

    CSS.registerProperty({
      name: '--masonry-column-width',
      syntax: '<length>',
      inherits: false,
      initialValue: '560px',
    });
  } else {
    support.innerHTML = `Your Browser Does not support the Layout Module<br><small>Still a working draft.</small>`;
  }
}

const support = document.querySelector('[data-supported]');

document.addEventListener('DOMContentLoaded', e => {
  console.clear();
  MasonryLayoutInitializer();
}, false);
              
            
!
999px

Console