Some Incredibly Clever Layout Pens from CodePen (with bonus twists)
Tags: css, layout, flexbox, grid
Published: 2019-01-10 18:51:27

---
title: Some Incredibly Clever Layout Pens from CodePen (with bonus twists)
published: true
description: I picked out a couple of posts that demonstrate CSS layout possibilities in interesting ways. 
tags: 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.

{% codepen https://codepen.io/nicolasjengler/pen/yGxaEW default-tab=result %}

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

```css
.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](https://css-tricks.com/guide-responsive-friendly-css-columns/) here so the browser does that splitting and flowing naturally.

You might wanna pop over to [Full Page View](https://codepen.io/erinesullivan/full/gxdbzp) to see this one:

{% codepen https://codepen.io/erinesullivan/pen/gxdbzp default-tab=result %}

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!

```css
.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:

{% codepen https://codepen.io/lukejacksonn/pen/QyPPmK default-tab=result %}

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:

```html
<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:

{% codepen https://codepen.io/marcobiedermann/pen/oYvoQL default-tab=result %}



### 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:

{% codepen https://codepen.io/oliviale/pen/bOWqbj default-tab=result %}

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](https://thepracticaldev.s3.amazonaws.com/i/s2r5067bzqfc4mju5l3p.png)


## Look around!

I've messed around with trying to [replicate magazine layouts](https://codepen.io/chriscoyier/pen/mewZzy) myself just for fun. There is [lots to explore](https://codepen.io/search/pens?q=layout&page=1&order=popularity&depth=everything&show_forks=on)!