CSS Grid Layout Module Level 2: Masonry Layout

A long requested CSS feature is to be able to create a “Masonry Layout” using pure CSS. Today we can already create a Masonry-like layout using grid-auto-flow: dense;, but unfortunately that’s not the real deal.

🤔 Masonry Layout?

Masonry is a grid layout based on columns, as popularized by Pinterest. Unlike other grid layouts, it doesn’t have fixed height rows. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

It became easy to implement thanks to the Masonry JavaScript Library.

~

Thankfully discussions to natively implement Masonry in CSS haven’t stopped and back in January it kinda settled on this syntax:

.masonry {
  display: grid;
  grid-gap: 1em;
  grid: masonry / repeat(auto-fit, minmax(20em, 1fr));
}

Knowing that Tab Atkins – author of CSS Grid Layout Level 1 – responded with I’m liking this quite a bit! was a good sign. What’s even better is that Firefox Nightly (version 77a1) has implemented it by now, behind a flag.

👨‍🔬 Do note that this Masonry addition is still a proposal and is considered to be highly experimental at the time of writing. The syntax is still being discussed upon and is NOT final at all. Heck, you can’t even find a mention of Masonry in the CSS Grid Module Level 2 Draft!

~

To enable the experimental Masonry implementation in Firefox Nightly go to about:config and set layout.css.grid-template-masonry-value.enabled to true.

Once enabled the following pen should show a nice Masonry Layout:

See the Pen CSS Masonry Layout (FF Nightly – Feature Flag) by Miriam Suzanne (@mirisuzanne) on CodePen.

Yes, I’m really excited about this one … let’s hope it sticks!

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

Emoji Customizer created with CSS Variables

Fun pen by Jakob Eriksen in which he combines Emoji and CSS Custom Properties to create an Emoji Customizer.

The reason that this works is because of the fact that emoji can have modifiers. Skin Tone and Hair, as used in the demo above, are such modifiers. Using the ZWJ ("\u200d") you can glue all parts together so that they become an “Emoji ZWJ Sequence”, yielding a new Emoji.

🤓 My favorite Emoji ZWJ Sequence is the Rainbow Flag (🏳️‍🌈). It literally is the combination of a white flag (🏳) and a rainbow (🌈).

💡 Using JavaScript it’s perfectly possible to spread Emoji ZWJ Sequences into their single Emoji, or even replace parts within an Emoji Sequence.

How we Know the Distance to Stars

Johnny Harris, whom you might know from the Vox Borders series, on how we can possibly measure the distance to things a quadrillion km away.

How Flocking Birds Make Amazing Murmurations

TIL: Boids Algorithm. And yes, that’s implemented using <canvas>

Colors in CSS: Hello Space-Separated Functional Color Notations

There are several ways to notate color values in CSS. Basically we have three options:

  1. Use of Keyword: e.g. black
  2. Hexadecimal Notation: e.g. #000000, #000, and #000000FF
  3. Functional Notation: e.g. rgb(0, 0, 0), rgba(0, 0, 0, 1) (and the hsl()/hsla() variants)

~

In the CSS Color Module Level 4 specification, there’s a new way to writing the Functional Notation: using spaces.

rgb(), rgba(), hsl(), and hsla() have all gained a new syntax consisting of space-separated arguments and an optional slash-separated opacity.

Above that rgba() has become an alias for rgb(), so our colors in CSS – using the Functional Notation – will soon look as follows:

/* Before: Comma-Separated Functional Color Notation */
div {
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 1);
}

/* After: Space-Separated Functional Color Notation */
div {
  color: rgb(0 0 0);
  color: rgb(0 0 0 / 1);
  color: rgb(0 0 0 / 100%);
}

~

You should start writing your colors using this new syntax today, as:

  1. The syntax is already supported by all major browsers.
  2. New color functions – such as lab(), lch() and color() – will only support the space-separated syntax

Your preprocessor can take care of older browsers 😉

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

Using React’s Key Attribute to remount a Component

Nik Graf details a little trick I also use from time to time: changing the key of a React component to force remount it.

Upon clicking a contact in the list, the active contact’s id is used as the key for the Detail component.

<Detail key={activeContact.id} contact={activeContact} />

Using React’s Key Attribute to remount a Component →

JavaScript’s Syntactic Quirks

Jason Orendorff looked into the JS spec, in detail …

JavaScript is rather hard to parse. Here is an in-depth accounting of its syntactic quirks, with an eye toward actually implementing a parser from scratch.

One quirk most JS devs have will have certainly heard of is Automatic Semicolon Insertion (ASI).

JavaScript’s Syntactic Quirks →

Using CSS to Control Text Selection

Will Boyd digs into the user-select CSS property:

CSS lets you control how text selection behaves and appears on your pages. This can help you improve usability in certain situations and add a little bit of visual flair. Let’s dive in!

His posts includes a very nice hack to make user-select: all; work only at first click.

code {
  -webkit-user-select: all;
  user-select: all;
}

code:focus {
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

🐛 As noted in the comments by Kel: this animation-hack doesn’t work in Safari.

I’ve extended his example to re-enable user-select: all; whenever the snippet is blurred, so that upon a next selection it will restart with selecting all again. Feels more natural.

See the Pen Select All… Then Select Some by Bramus (@bramus) on CodePen.

🤔 This looks like something that should be added to the CSS Spec. It would require a new value for user-select, as user-select: all; explicitly says that all must be selected:

If a selection would contain part of the element, then the selection must contain the entire element including all its descendants.

Using CSS to Control Text Selection →

Responsive Images the Simple Way

The logic behind displaying an image responsively is complicated. It involves determining how large the image will be displayed, as well as understanding whether the user is on a high-resolution display, among other things. Thankfully, the browser is better equipped than we are to handle this logic. All we need to do is give it some hints. We’ll use the srcset attribute to provide a list of image assets to choose from, and the sizes attribute to tell the browser how large the image will display at various breakpoints.

Yes, the syntax is still the same as in 2014, but it’s good to be remembered of it … I always find myself looking things up again when it comes to Responsive Images 😬

Responsive Images the Simple Way →

The 8-bit Arcade Font, Deconstructed

In his book Arcade Game Typography designer Toshi Omagari breaks down the evolution, design, and history of arcade game fonts. In this video from the Vox by Design series he’s interviewed and asked about his favorite 8-bit fonts.

Video game designers of the ’70s, ’80s, and ’90s faced color and resolution limitations that stimulated incredible creativity. With each letter having to exist in a small pixel grid, artists began to use clever techniques to create elegant character sets within a tiny canvas.