Build CSS Layouts in seconds
Less frustration. More flow. Complete your work faster.

When building layouts, most people think it CSS properties like display: grid and grid-template-columns, but doing that slows you down and causes you to lose track of what you were doing.

But we didn’t have good alternatives so far — until now.

90% of layout rules fall under just 4 categories

When you have classes that supports each category’s needs, building layouts become a breeze.

Shell

The fundamental app structure, like:

Header
Sidebar
Main content

These must work for holy-grail placements.

Macro

Page-level arrangements, like:

Sections
Grids

These must be responsive and flexible to use in various places.

Micro

Component-level creations, like:

Content arrangement
Dividers
Breakouts

These must let you shape the component.

Positioning

Precise placement, like:

Overlays
Corner elements
Badges

These need quick precision so you don’t have to adjust them manually

Splendid Layouts
These 25 utilities help you build responsive layouts quickly

Splendid Layouts contains 25 utilities spread over these 4 categories:

2 in shell
9 in macro
9 in micro
5 in positioning

You can tell what these utilities do just by reading their class names — you don’t need to dive deep into CSS Land to understand them.

Here are the utilities. Click on each one to view their documentation.

Shell Layouts

Shell Simple

Basic holy-grail with header, content, and footer.

Header

Content

Shell Grid

Holy-grail layout with header, content, footer, and sidebars.

Header

Content

Macro Layouts

Wrap

Adds inline padding to wrap the element

Wrapped content

Grid simple

Creates a CSS Grid with any number of columns.

Grid Fr Auto

Creates a CSS Grid with 1fr auto.

1fr

Auto

Grid Fr Auto

Creates a CSS Grid auto 1fr.

Auto

1fr

Grid With Breakout

A three-column grid that gives you utilities to break out of the main content easily.

Normal

🫲

Normal

🤜

Breakout

Start

End

Grid Gallery

Create CSS galleries with auto-fill or auto-fit.

Grid Flex

A flexbox grid that automatically centers or expands orphan items.

masonry

A grid with items of unequal width and height.

Subgrid

Use CSS subgrid and nested subgrids with ease

Micro Layouts

Horizontal

Arrange items in a horizontal manner.

One

Two

Three

Vertical

Arrange items in a vertical manner.

One

Two

Three

Four

Five

Six

Flow

Allow items to flow from one line to another.

One

Two

Three

Four

Five

Six

Stack

Stacks elements on top of each other.

Background

Content

Foreground

Hover over this to see the stack

Dividers

Create horizontal and vertical dividers easily within your components.

vertical

horizontal

Breakout

Let an element break out of its container with negative margins.

Top

Bottom

Left

Right

Scrollable

Create scrollbars with scroll-snap enhancements for your components when appropriate

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

Container

Creates an element for container queries

75% of the container's width

New Stacking Context

Creates a new stacking context via an easy way

New Stacking Context 🙃

Positioning

Pos

Position your element on any side or corner.

TopLeft

Top

TopRight

Left

Center

Right

BtmLeft

Bottom

BtmRight

Edge

Put your element on any edge — even in the corners

TopLeft

Top

TopRight

Left

Right

BtmLeft

Btm

BtmRight

Fixed

Create fixed-position items on any side or corner.

TopLeft

Top

TopRight

Left

Right

BottomRight

Bottom

BottomLeft

Nudge

Move an element towards the center of its container (or away from it).

Nudge Amount

0.5rem

Top Left

Top

Top Right

Left

Right

Bottom Left

Bottom

Bottom Right

Sticky

Creates sticky elements on any side and style it when it sticks

Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.

Sticks to the top. Turns blue when sticking.

Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.

You no longer need to remember CSS layout properties and values.

When you have these utilities, you:

No need to memorize layout patterns and code
No need to copy-paste templates and change them to fit your needs
Will be able to build layouts from scratch quickly, (in seconds), without becoming frustrated and losing your context

I’ll be honest — I haven’t been able to go back to standard CSS after I began using these classes. It’s that effective.

An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun. An easy way to create layouts. Make layouts in seconds. Build anything you want. Compose layouts with ease. Stay in your flow. Have more fun.

Layouts has never been this simple

You don’t have to believe me, because you can see it for yourself.

Here are some examples of layouts built with Splendid Layouts vs Vanilla CSS — just click through them and you’ll see the difference in a few seconds.

To top it off, we’re only showcasing 1 out of all 25 utilities here!

See other features Check the full documentation

Just write grid-simple, and specify the number columns.

<div class="grid-simple [--cols:3]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Here you have to prevent grid-blowout by including minmax on the grid and max-width on the children items.

.three-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;

  > * {
    max-width: 100%;
  }
}

Here’s the output:

Here’s how you can make a 1-column layout on mobile and a 3-column layout on desktop.

<div class="grid-simple [--cols:1] md:[--cols:3]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Resize this window!

Here you gotta change the grid-template-columns value at different breakpoints. It’s of course, easier with CSS variables.

But imagine writing this every, single, time…

.grid {
  --cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 1rem;
  width: 100%;

  @media (min-width: 768px) {
    --cols: 3;
  }
}

Just change --span. Simple!

<div class="grid-simple [--cols:3] gap-4">
  <div class="[--span:2]">...</div>
  <div class="[--span:1]">...</div>
</div>

This can be hard in CSS cos you need to select the right child…

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* ... */

  > :first-child { grid-column-end: span 2; }
  > :nth-child(2) { grid-column-end: span 1; }
}

See other features Check the full documentation

Who Build This?

Hi, my name is Zell and I’m a developer just like you.

Splendid Layouts is born from my personal frustration with ineffective layouts and my desire to build great things quickly.

I believe that layouts can be created quickly.

We don’t have to work CSS code for hours just to get them right.
We can just write out what we want — and tada, the magic should happen.

That’s why I built Splendid Layouts. I’ve never been happier using it since.

Zell is the rare sort of developer who both knows his stuff and can explain even the most technical jargon in approachable — and even fun! — ways.

I’ve taken his courses and always look forward to his writing because I know I’ll walk away with something that makes me a better front-ender.

Geoff Graham

Chief Editor @ CSS Tricks

Your articles are honestly the best resources out there! They have really helped 100Devs folx understand topics that are always stumbling blocks for new devs.

Really appreciate the work you put into your content!

Leon Noel

#100Devs Instructor

Zell is one of those rare people who commands tremendous knowledge and experience but remains humble and helpful. They want you to know what they know, not just be impressed by it.

In other words, Zell is a natural teacher. You’re lucky to have him because he feels lucky to be able to help you in your journey.

Heydon Pickering

Web & Accessibility Extraordinaire

Getting access to Splendid Layouts

You have two ways to get access to Splendid Layouts today.

Choose Splendid Layouts if you want to work with our robust layout system today. Or get Splendid Pro to have an access pass to everything we have built for developers who value craft and DX.

Splendid Layouts

$60 only

Get everything you need to build layouts in seconds.

All layout classes
Guides for each each layout class
Guides on combining layout classes^*
Discord community

Splendid Pro

$150 $100 only

33% off

Artfully crafted tools to speed up your web development workflow — includes components, layouts, styles, and utilities.

Everything in Splendid Layouts
All other Splendid libraries
- Splendid Astro^*
- Splendid Styles^*
- Splendid Svelte^*
- Splendid Utils^*

^*Documentation for these are still a work-in-progress. I’m striving to finish them as soon as I can :)

Once you have decided:

Click the respective button
Make payment
And you’ll receive an email with your password to login and read the guides for each tool.

Here’s what you can expect as you begin to use Splendid Layouts:

Today: You can download and use it in your projects
Tomorrow: You’ll be able to build simple layouts quickly — like responsive 3-column grids, masonry, and other straightforward stuff.
Within this week: You might start using advanced classes like stack to create more complex layouts.
By the end of this month: You might never want to go back to writing CSS properties or Tailwind utility classes for the use cases covered by Splendid Layouts.

Frequently Asked Questions

Here are answers to some of the questions may ask as you wonder if Splendid Layouts would fit into your development workflow.

Layouts can be easy
We don’t have to spend hours tweaking CSS to make layouts look just the way we want them to be

It might take a few days to get used to this new style of writing layouts.

But, once you get the hang of it, you’ll begin to feel the ease. It’s like walking downhill after you’ve been jogging uphill for a while.

I’m serious.

Try it for risk-free for 60 days. If Splendid Layouts doesn’t speed up your workflow enough to justify the cost, get every cent back. No questions asked.

Splendid Layouts

$60 only

Get everything you need to build layouts in seconds.

All layout classes
Guides for each each layout class
Guides on combining layout classes^*
Discord community

Splendid Pro

$150 $100 only

33% off

Artfully crafted tools to speed up your web development workflow — includes components, layouts, styles, and utilities.

Everything in Splendid Layouts
All other Splendid libraries
- Splendid Astro^*
- Splendid Styles^*
- Splendid Svelte^*
- Splendid Utils^*

Let’s make layouts fun and easy — then we all get to spend time doing the things we love.

Stay awesome,
Zell

Build CSS Layouts in secondsLess frustration. More flow. Complete your work faster.

90% of layout rules fall under just 4 categories

Splendid LayoutsThese 25 utilities help you build responsive layouts quickly

You no longer need to remember CSS layout properties and values.

Layouts has never been this simple

Who Build This?

Getting access to Splendid Layouts

Frequently Asked Questions

What technologies and frameworks does Splendid Layouts work with?

Will this work with my existing CSS architecture?

Will this work with my existing Tailwind setup?

How can I create customized layouts beyond the 25 classes?

Do I need to learn this entire system at once, or can I adopt it gradually?

What support options are available if I want more guidance?

Will this keep up with new CSS features and browser capabilities as they evolve?

How does this help me stay competitive against AI tools that can already generate CSS layouts?

This looks great for layouts, but what about components and the rest of my styling workflow?

Is there a money-back guarantee?

Layouts can be easyWe don’t have to spend hours tweaking CSS to make layouts look just the way we want them to be

Build CSS Layouts in seconds
Less frustration. More flow. Complete your work faster.

Splendid Layouts
These 25 utilities help you build responsive layouts quickly

Layouts can be easy
We don’t have to spend hours tweaking CSS to make layouts look just the way we want them to be