DEV Community

loading...

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

chriscoyier profile image Chris Coyier ・2 min read

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.

grid

Look around!

I've messed around with trying to replicate magazine layouts myself just for fun. There is lots to explore!

Discussion (5)

pic
Editor guide
Collapse
shawntax profile image
Shawn

These are so fresh.

Collapse
rizkysaskiaputra profile image
Collapse
nicolasjengler profile image
Nicolás J. Engler

Thanks for picking up the CSS grid bullet journal, Chris! It was super fun to make 😊

Collapse
jrohatiner profile image
Judith

Thanks Chris! Great post!

Collapse
rsdesoto profile image
Ry

These are great -- I'm particularly charmed by the makeup palettes! What a neat way of displaying grid.