30 CSS Grid Layouts22 / 30

Pure CSSMIT licensed

Asymmetric Splash

A hero section with real art direction: color blocks, an oversized display numeral and the headline all occupy overlapping grid regions at different z-layers, building the off-balance tension of poster design. Negative-space asymmetry from placement arithmetic — not from a designer's PNG export.

Published Updated

Live Demo
Try it

The code

<section class="cgl-22" aria-label="Asymmetric splash hero demo">
  <div class="cgl-22__stage">
    <div class="cgl-22__slab" aria-hidden="true"></div>
    <div class="cgl-22__panel" aria-hidden="true"></div>
    <span class="cgl-22__numeral" aria-hidden="true">22</span>
    <h2 class="cgl-22__headline">Balance is<br>overrated</h2>
    <p class="cgl-22__caption">Four layers · one grid · zero absolute positioning</p>
  </div>
</section>
.cgl-22,
.cgl-22 *,
.cgl-22 *::before,
.cgl-22 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cgl-22 {
  width: 100%;
  min-height: 100vh;
  --crimson: oklch(0.5 0.2 20);
  --cream: oklch(0.95 0.02 85);
  --ink: oklch(0.2 0.02 20);
  font-family: system-ui,sans-serif;
  background: var(--ink);
  padding: 1.6rem;
}

.cgl-22 .cgl-22__stage {
  display: grid;
  grid-template-columns: repeat(10,1fr);
  grid-template-rows: repeat(6,minmax(34px,auto));
  max-inline-size: 640px;
  margin-inline: auto;
  overflow: hidden;
}

.cgl-22 .cgl-22__slab {
  grid-column: 1/6;
  grid-row: 1/5;
  z-index: 1;
  background: var(--crimson);
}

.cgl-22 .cgl-22__panel {
  grid-column: 4/11;
  grid-row: 2/7;
  z-index: 2;
  background: var(--cream);
}

.cgl-22 .cgl-22__numeral {
  grid-column: 7/11;
  grid-row: 1/4;
  z-index: 3;
  font-size: clamp(5rem,16vw,9rem);
  font-weight: 900;
  line-height: .75;
  color: transparent;
  -webkit-text-stroke: 2px var(--crimson);
  justify-self: end;
  translate: 6% -12%;
}

.cgl-22 .cgl-22__headline {
  grid-column: 2/9;
  grid-row: 3/5;
  z-index: 4;
  align-self: center;
  font-size: clamp(1.8rem,5.5vw,3rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}

.cgl-22 .cgl-22__caption {
  grid-column: 4/11;
  grid-row: 6/7;
  z-index: 4;
  align-self: end;
  font-family: ui-monospace,Menlo,monospace;
  font-size: .66rem;
  letter-spacing: .1em;
  color: color-mix(in oklab,var(--ink) 65%,var(--cream));
  padding: .8rem;
}

@media (max-width: 520px) {
  .cgl-22 .cgl-22__numeral {
    grid-column: 6/11;
  }

  .cgl-22 .cgl-22__headline {
    grid-column: 2/10;
  }
}
/* No JavaScript — four grid regions overlap at explicit z-layers; the outlined numeral bleeds off-canvas behind overflow:hidden. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Grid Layout from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Asymmetric Splash
Source: https://codefronts.com/layouts/css-grid-layouts/asymmetric-splash/

A hero section with real art direction: color blocks, an oversized display numeral and the headline all occupy overlapping grid regions at different z-layers, building the off-balance tension of poster design. Negative-space asymmetry from placement arithmetic — not from a designer's PNG export.
## HTML
```html
<section class="cgl-22" aria-label="Asymmetric splash hero demo">
  <div class="cgl-22__stage">
    <div class="cgl-22__slab" aria-hidden="true"></div>
    <div class="cgl-22__panel" aria-hidden="true"></div>
    <span class="cgl-22__numeral" aria-hidden="true">22</span>
    <h2 class="cgl-22__headline">Balance is<br>overrated</h2>
    <p class="cgl-22__caption">Four layers · one grid · zero absolute positioning</p>
  </div>
</section>
```
## CSS
```css
.cgl-22,
.cgl-22 *,
.cgl-22 *::before,
.cgl-22 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cgl-22 {
  width: 100%;
  min-height: 100vh;
  --crimson: oklch(0.5 0.2 20);
  --cream: oklch(0.95 0.02 85);
  --ink: oklch(0.2 0.02 20);
  font-family: system-ui,sans-serif;
  background: var(--ink);
  padding: 1.6rem;
}

.cgl-22 .cgl-22__stage {
  display: grid;
  grid-template-columns: repeat(10,1fr);
  grid-template-rows: repeat(6,minmax(34px,auto));
  max-inline-size: 640px;
  margin-inline: auto;
  overflow: hidden;
}

.cgl-22 .cgl-22__slab {
  grid-column: 1/6;
  grid-row: 1/5;
  z-index: 1;
  background: var(--crimson);
}

.cgl-22 .cgl-22__panel {
  grid-column: 4/11;
  grid-row: 2/7;
  z-index: 2;
  background: var(--cream);
}

.cgl-22 .cgl-22__numeral {
  grid-column: 7/11;
  grid-row: 1/4;
  z-index: 3;
  font-size: clamp(5rem,16vw,9rem);
  font-weight: 900;
  line-height: .75;
  color: transparent;
  -webkit-text-stroke: 2px var(--crimson);
  justify-self: end;
  translate: 6% -12%;
}

.cgl-22 .cgl-22__headline {
  grid-column: 2/9;
  grid-row: 3/5;
  z-index: 4;
  align-self: center;
  font-size: clamp(1.8rem,5.5vw,3rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}

.cgl-22 .cgl-22__caption {
  grid-column: 4/11;
  grid-row: 6/7;
  z-index: 4;
  align-self: end;
  font-family: ui-monospace,Menlo,monospace;
  font-size: .66rem;
  letter-spacing: .1em;
  color: color-mix(in oklab,var(--ink) 65%,var(--cream));
  padding: .8rem;
}

@media (max-width: 520px) {
  .cgl-22 .cgl-22__numeral {
    grid-column: 6/11;
  }

  .cgl-22 .cgl-22__headline {
    grid-column: 2/10;
  }
}
```

## JavaScript
```js
/* No JavaScript — four grid regions overlap at explicit z-layers; the outlined numeral bleeds off-canvas behind overflow:hidden. */
```

How this works

A 10×6 grid hosts four layers: a crimson slab (columns 1–6, rows 1–5, z:1), a cream panel offset against it (columns 4–11, rows 2–7, z:2), a giant outlined numeral bleeding off the top (columns 7–10, rows 1–3, z:3) and the headline straddling slab and panel (columns 2–8, rows 3–5, z:4). Every overlap is two integers in the stylesheet — art-directable by editing numbers.

The numeral is display typography as texture: -webkit-text-stroke outlines it, and it clips off the section edge because the section (not the page) has overflow: hidden. On mobile the whole composition collapses to a stacked flow by reassigning six line numbers in one media query.

Make it yours

  • Rebalance the composition by nudging any region's line numbers — the layers renegotiate automatically.
  • Swap the numeral for an SVG mark or photo cutout at the same grid position.
  • Invert the palette (cream slab, crimson panel) for a second campaign look.
  • Animate layer entrances with translate + opacity keyframes, staggered by z-order.

Gotchas — read before shipping

  • Off-canvas bleed requires overflow:hidden on the SECTION — on the page body it kills sticky positioning elsewhere.
  • Check headline contrast where it crosses layer boundaries; the demo pins it over the cream panel's region for a stable backdrop.
  • text-stroke is still prefixed everywhere — write both prefixed and paint-order SVG fallbacks if the outline is brand-critical.

Browser support

ChromeSafariFirefoxEdge
111+16.2+113+111+

Floor set by oklch(), color-mix() as this demo is written. The core technique itself goes back further — Chrome 57+.

Layout is original grid; -webkit-text-stroke works in all evergreens (prefixed). oklch colours are the only 2023 ingredient.

Techniques used in this demo

color-mix()MDN ↗grid-templateMDN ↗clamp()MDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →