Some Incredibly Clever Layout Pens from CodePen (with bonus twists)

#css #layout #flexbox #grid

Nicolás J Engler's Bullet Journal

CSS grid makes this calendar, a perfect simple use case! But the transforms giving different elements tilt really give it life.

Love that markered-off cell look. Check it out, it's all CSS with a repeating gradient:

.cell.x {
  background-image: 
    repeating-linear-gradient(
      -45deg, 
      transparent, transparent 3px, 
      #e53a40 3px, #e53a40 6px
    );
}

Erin E. Sullivan's Book Layout

You might think you'd have to manually cut content into two different elements to make a side-by-side layout like this that maintains content flow. But nope! Erin is using CSS columns here so the browser does that splitting and flowing naturally.

You might wanna pop over to Full Page View to see this one:

There is even more clever bits here with all the handwriting-inspired underlining, highlighting, and stet. It's a background data URL SVG that makes that underline happen!

.open-book a {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…gsNDMuOCw0MzIuNCw0Ni41LDQzMC45LDQ5LjJ6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L3N2Zz4=) bottom repeat-x;
}

Luke Jacksonn's Flexbox Masonry

Beyond being flexible, flexbox can be set in multiple directions and can wrap. Smashing all those ideas together can yield interesting flexible layouts like this:

The cool trick in this one is that those otherwise empty flex elements keep their aspect ratio sizes by having SVG elements inside where their viewBox dictates that ratio:

<div><svg width="320px" viewBox="0 0 2 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>

Usually Masonry deals with what look like staggered vertical columns, but the content goes generally left-to-right in the source order still. The Masonry library still does a great job of that:

Olivia's Makeup Palettes

You know flexbox and grid can play together nicely right? Any grid cell could become a flex container. But it works the other way around too, a flex item could become a grid container! That's exactly what's happening here:

The overall layout here is flexbox, but the individual colored sections (which cleverly open up with 3D transforms) have a grid layout underneath them. Plus, each one has a slightly different grid setup, which is a wonderful touch.