MOGP: A SCSS Layout System That Only Does One Thing

MZO — Sat, 19 Sep 2026 19:42:10 +0000

Container, grid, span, gap, offset — nothing more.

Today I'm open-sourc*ing **MOGP Layout System*, a minimal SCSS library built around a simple idea: **layout doesn't need a framework, it needs a system.

The problem

Most CSS frameworks try to do everything — layout, typography, color, components, animations, utility classes for margin and padding in every direction. That's useful when you want a full design system out of the box. But a lot of the time, you don't. You already have your own typography scale, your own color tokens, your own component library. What you actually need is much narrower: a container that centers content, a grid that behaves predictably, and a way to control spacing without writing the same media queries in every project.

MOGP is built for that narrower need.

What it actually is

MOGP gives you five things, and stops there:

Container — centers content, applies a max width
Grid — a configurable-column CSS Grid container
Span — how many columns an element takes up, responsively
Gap — spacing between grid items, fixed or automatic
Offset — pushing an element sideways within the grid

That's it. No flex utilities, no display utilities, no color system, no components. If you need those, you already have tools for them — MOGP isn't trying to replace your design system, it's trying to stay out of its way.

A quick look

<div class="mogp-container mogp-pi-auto">
  <div class="mogp-grid mogp-gap-auto">
    <div class="mogp-span-12 mogp-span-md-6 mogp-span-lg-4">Card</div>
    <div class="mogp-span-12 mogp-span-md-6 mogp-span-lg-4">Card</div>
    <div class="mogp-span-12 mogp-span-md-12 mogp-span-lg-4">Card</div>
  </div>
</div>

Full width on mobile, two columns at md, three at lg. The container's padding and the grid's gap adjust automatically per breakpoint — no extra classes needed for that part.

The details that make it usable in real projects

Everything is namespaced. Classes and CSS custom properties both go through a $namespace variable at compile time. Drop MOGP into a project with an existing design system, and it won't collide with anything — .container, .grid, .span become .mogp-container, .mogp-grid, .mogp-span (or whatever prefix you choose).

The grid isn't locked to 12 columns. $grid-columns is a single SCSS setting. Change it to 16, or 24, and every span, offset, and column-start/column-end class regenerates to match — no manual bookkeeping.

Auto-rhythm utilities. pi-auto and gap-auto apply spacing that scales per breakpoint from a single class, instead of stacking five responsive classes per element. Change the rhythm once in your SCSS config, and every container/grid using pi-auto/gap-auto picks it up automatically.

Offset resets cleanly. If you push an element with offset-2 at a smaller breakpoint, offset-lg-auto cancels it cleanly at a larger one — resetting to the grid's normal auto-placement instead of forcing a specific column line.

Compile-time validation. Pass a breakpoint map that isn't in ascending order, or a namespace with a space in it, and the build fails immediately with a clear error — instead of shipping broken CSS silently.

Two ready-made compiled CSS files, if you don't want to compile SCSS yourself: a Minimal variant (container, grid, span, offset) and a Full variant (everything, including manual gap/padding steps and explicit column-start/column-end control).

Why build this instead of using what exists

There are plenty of grid systems already. Most of them either come bundled inside a much larger framework, or they're flexible in ways I didn't need and rigid in the one way I did — the column count, the breakpoint names, the namespace. MOGP is deliberately narrow: it's the layout primitives, fully configurable, and nothing else. If your project's layout needs are "container + grid + spacing, but tell me exactly how," this is built for that.

Where it stands right now

MOGP is at v0.1.0 — an early release. The core API (container, grid, span, gap, offset, and the configuration system behind them) is stable enough to build on, but I'm treating this as a starting point rather than a finished product. If something is missing, awkward, or just wrong, I'd genuinely like to hear about it.

Repo: github.com/withmehmet/mogp-layout

It's MIT licensed, has no dependencies beyond Dart Sass, and works either as a compile-time SCSS import or as one of the two ready-made CSS files. Feedback and issues are very welcome.