Adding CSS Masonry Layout

Today I added native CSS masonry layout to the blog post items on the Home page. For now the feature is only available behind a flag in Firefox, but check in with MDN docs for when it receives broader support.

For progressive enhancement I’ve used the @supports query:

@supports (grid-template-rows: masonry) {
  .parent-to-be-displayed-as-masonry {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: masonry;
    grid-gap: 1rem;
  }
}

There are many properties that will influence the layout, but I haven’t tooled around with them.