Build your features without worrying about layouts. Stay in your flow and complete your work faster.
Most developers think in 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.
We didn’t have good alternatives so far — until now.
Imagine how much simpler layouts could be if you can just think Three column grid, Masonry layout, or Sticky element, and it just works. Splendid Layouts let you do just that.
When you have classes that supports each category's needs, building layouts become a breeze.
The fundamental app structure, like:
These must be flexible enough to account for various holy-grail placements.
Page-level arrangements, like:
These must enable responsive behavior and still be flexible enough for different placements.
Component-level creations, like:
These need to give you ways to shape the component to different styles.
Precise placement, like:
These need quick precision so you don't adjust top, left, bottom, and right positions manually
25 utilities, infinite possibilities. Building responsive layouts quickly is no longer a dream.
Splendid Layouts contains 25 utilities spread over these 4 categories:
These utilities are highly visual. You can tell what they do just by reading their class names, so your mind can place them in the right location quickly without diving deep into CSS Land!
Without further ado, here are the utilities. Click on each one to view their documentation.
Creates a CSS Grid with any number of fr columns, followed by a final auto column.
A three-column grid that gives you utilities to break out of the main content easily.
Create CSS galleries with auto-fill or auto-fit.
Stacks elements on top of each other.
Create scrollbars with scroll-snap enhancements for your components when appropriate
Position your element on any side or corner.
Put your element on any edge — even in the corners
Create fixed-position items on any side or corner.
Move an element towards the center of its container (or away from it).
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.
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.
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.
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.
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.
With these tools in your belt, you no longer need to remember the (who knows how many) CSS layout properties and value pairs.
These classes are mostly invisible once you have gotten used to them. Just like how Mac users can’t really switch back to Windows since Mac is well designed, I haven’t been able to go back after I began using these classes.
We've designed each utility to robust and simple. They handle can handle the demands of a power user while producing robust code at the same time.
Here are some features of grid-simple to illustrate this point.
When you use Tailwind or CSS, you need to include boilerplate code like minmax and max-width to prevent CSS grid blowout.
Here’s what you need if you used Tailwind:
<div class="grid grid-cols-[repeat(3,minmax(0,1fr))] gap-4"> <div class="max-w-full">...</div> <div class="max-w-full">...</div> <div class="max-w-full">...</div></div>And here’s the equivalent in Vanilla CSS:
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 100%;
> * { max-width: 100%; }}Here’s the output:
We handle these boilerplate for you so you can focus on building stuff.
Here’s what you’ll write if you use Tailwind:
<div class="grid-simple [--cols:3] gap-4"> <div>...</div> <div>...</div> <div>...</div></div>Or, if you prefer using CSS:
.your-grid { @apply grid-simple; --cols: 3; gap: 1rem;}Much simpler, right?
With Tailwind, you have to write the grid-cols utility again, which can be a pain in the ass.
<div class="grid grid-cols-[repeat(2,minmax(0,1fr))] md:grid-cols-[repeat(3,minmax(0,1fr))]"> <div class="...">...</div> <div class="...">...</div> <div class="...">...</div></div>With CSS, it’s easier if you use CSS variables:
.grid { --cols: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1rem; max-width: 100%;
/* ... */
@media (min-width: 768px) { --cols: 3; }}We’ve built the --cols variable into grid-simple so you can use that directly. Easy peasy.
With Tailwind:
<div class="grid-simple [--cols:2] md:[--cols:3]"> <div>...</div> <div>...</div> <div>...</div></div>With CSS:
.your-grid { @apply grid-simple; --cols: 2; gap: 1rem;
@media (min-width: 768px) { --cols: 3; }}You can customize the number of columns with Tailwind by setting the grid-column property.
Here’s a Tailwind example without the agony of preventing a grid blowout.
<div class="grid grid-cols-6 gap-4"> <div class="col-span-1">...</div> <div class="col-span-2">...</div> <div class="col-span-3">...</div></div>This is harder in CSS because you have to select the right child.
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* ... */
> :first-child { grid-column-end: span 1; } > :nth-child(2) { grid-column-end: span 2; } > :nth-child(3) { grid-column-end: span 3; }}Here’s the output:
Splendid Labz makes spanning children columns easy with the --span property. No worries about grid blowout while you’re doing this either!
Here’s a Tailwind example:
<div class="grid-simple [--cols:3] gap-4"> <div class="[--span:1]">...</div> <div class="[--span:2]">...</div> <div class="[--span:3]">...</div></div>With CSS, you still gotta select the right child, but it’s much simpler than the vanilla CSS example.
.grid { @apply grid-simple; --cols: 3;
> :first-child { --span 1; } > :nth-child(2) { --span 2; } > :nth-child(3) { --span 3; }}Much simpler, right?
The Developer Behind This Layout Solution
Hi, my name is Zell and I like to do great work. So far, I have:
Splendid Layouts is born from my personal frustration with ineffective layouts and my desire to build great things quickly.
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.
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!
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.
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.
*Documentation for these are still a work-in-progress. We're striving to finish them as soon as we can :)
Once you have decided:
Here’s what you can expect as you begin to use Splendid Layouts:
stack to create more complex layouts.Here are answers to some of the questions may ask as you wonder if Splendid Layouts would fit into your development workflow.
They should support your work and multiply your capabilities.
They should not feel frustrating to use.
They should not consume your energy.
I built Splendid Layouts because I did not want to be frustrated with the existing tools anymore. I want to be able to create layouts faster with less effort.
But I also understand that too many libraries have overpromised and underdelivered, so you might not even want to check out another one.
That’s okay.
But if you continue to have a nagging feeling that there could be a better way to create layouts, you might want to listen to that for a little bit.
If you’re saying things like:
Deep down, you know that speed matters. Every hour you spend wrestling layouts is another hour you’re not building things that actually matter.
The cost of staying where you are isn’t just the wasted hours. It’s the missed opportunities to showcase your real skills — the ones AI can’t replicate: your eye for detail, your understanding of user experience, your ability to craft something beautiful.
Splendid Layouts doesn’t replace your expertise. It amplifies it. You’ll still be writing quality code, just faster. You’ll still be making thoughtful decisions, just without the CSS busywork.
Try it for 60 days. If Splendid Layouts doesn’t speed up your workflow enough to justify the cost, get every cent back. No questions, no hassles.
You’re too talented to waste time fighting layouts.
Let’s fix this once and for all.
P.S. Your attention to detail is an asset, not a liability. The right tools honor that perfectionism instead of fighting it. Get Splendid Layouts and stop settling for tools that make you choose between speed and craft.