30 CSS Grid Layouts21 / 30

Pure CSSMIT licensed

Diagonal Skew Grid

Sharp diagonal section transitions — the agency-site signature — done the maintainable way: the section skews, its children counter-skew, and the content inside is an ordinary grid that never knows it's tilted. No SVG dividers, no clip-path seams that misalign at odd viewport widths.

Published Updated

Live Demo
Try it

The code

<section class="cgl-21" aria-label="Diagonal skew grid demo">
  <div class="cgl-21__intro"><p>Ordinary flow above the band.</p></div>
  <div class="cgl-21__band">
    <div class="cgl-21__inner">
      <h3>Cut at 4 degrees</h3>
      <div class="cgl-21__stats">
        <article><strong>−4deg</strong><span>section skew</span></article>
        <article><strong>+4deg</strong><span>child counter-skew</span></article>
        <article><strong>tan(4°)</strong><span>overlap math</span></article>
      </div>
    </div>
  </div>
  <div class="cgl-21__outro"><p>Ordinary flow below. The band's edges are transforms — no SVG dividers, no seams.</p></div>
</section>
.cgl-21,
.cgl-21 *,
.cgl-21 *::before,
.cgl-21 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cgl-21 {
  width: 100%;
  min-height: 100vh;
  --angle: 4deg;
  --electric: oklch(0.8 0.16 195);
  --ink: oklch(0.16 0.02 240);
  font-family: system-ui,sans-serif;
  background: oklch(0.96 0.008 220);
  overflow: hidden;
}

.cgl-21 .cgl-21__intro,
.cgl-21 .cgl-21__outro {
  padding: 2.2rem 1.6rem;
  color: oklch(0.4 0.03 230);
}

.cgl-21 .cgl-21__intro p,
.cgl-21 .cgl-21__outro p {
  font-size: .85rem;
}

.cgl-21 .cgl-21__band {
  transform: skewY(calc(var(--angle)*-1));
  background: linear-gradient(110deg,var(--ink),oklch(0.22 0.05 220));
  padding-block: 2.6rem;
  margin-block: 1rem;
}

.cgl-21 .cgl-21__band>* {
  transform: skewY(var(--angle));
}

.cgl-21 .cgl-21__inner {
  padding-inline: 1.6rem;
  max-inline-size: 640px;
  margin-inline: auto;
}

.cgl-21 h3 {
  color: var(--electric);
  font-size: clamp(1.3rem,3.5vw,1.8rem);
  margin-block-end: 1.2rem;
}

.cgl-21 .cgl-21__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap: 12px;
}

.cgl-21 .cgl-21__stats article {
  background: oklch(1 0 0/.06);
  border: 1px solid color-mix(in oklab,var(--electric) 30%,transparent);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.cgl-21 .cgl-21__stats strong {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 1.2rem;
  color: var(--electric);
}

.cgl-21 .cgl-21__stats span {
  font-size: .72rem;
  color: oklch(0.7 0.02 220);
}
/* No JavaScript — skewY on the band, inverse skewY on its children; the inner grid renders level inside the tilt. */
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: Diagonal Skew Grid
Source: https://codefronts.com/layouts/css-grid-layouts/diagonal-skew-grid/

Sharp diagonal section transitions — the agency-site signature — done the maintainable way: the section skews, its children counter-skew, and the content inside is an ordinary grid that never knows it's tilted. No SVG dividers, no clip-path seams that misalign at odd viewport widths.
## HTML
```html
<section class="cgl-21" aria-label="Diagonal skew grid demo">
  <div class="cgl-21__intro"><p>Ordinary flow above the band.</p></div>
  <div class="cgl-21__band">
    <div class="cgl-21__inner">
      <h3>Cut at 4 degrees</h3>
      <div class="cgl-21__stats">
        <article><strong>−4deg</strong><span>section skew</span></article>
        <article><strong>+4deg</strong><span>child counter-skew</span></article>
        <article><strong>tan(4°)</strong><span>overlap math</span></article>
      </div>
    </div>
  </div>
  <div class="cgl-21__outro"><p>Ordinary flow below. The band's edges are transforms — no SVG dividers, no seams.</p></div>
</section>
```
## CSS
```css
.cgl-21,
.cgl-21 *,
.cgl-21 *::before,
.cgl-21 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cgl-21 {
  width: 100%;
  min-height: 100vh;
  --angle: 4deg;
  --electric: oklch(0.8 0.16 195);
  --ink: oklch(0.16 0.02 240);
  font-family: system-ui,sans-serif;
  background: oklch(0.96 0.008 220);
  overflow: hidden;
}

.cgl-21 .cgl-21__intro,
.cgl-21 .cgl-21__outro {
  padding: 2.2rem 1.6rem;
  color: oklch(0.4 0.03 230);
}

.cgl-21 .cgl-21__intro p,
.cgl-21 .cgl-21__outro p {
  font-size: .85rem;
}

.cgl-21 .cgl-21__band {
  transform: skewY(calc(var(--angle)*-1));
  background: linear-gradient(110deg,var(--ink),oklch(0.22 0.05 220));
  padding-block: 2.6rem;
  margin-block: 1rem;
}

.cgl-21 .cgl-21__band>* {
  transform: skewY(var(--angle));
}

.cgl-21 .cgl-21__inner {
  padding-inline: 1.6rem;
  max-inline-size: 640px;
  margin-inline: auto;
}

.cgl-21 h3 {
  color: var(--electric);
  font-size: clamp(1.3rem,3.5vw,1.8rem);
  margin-block-end: 1.2rem;
}

.cgl-21 .cgl-21__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap: 12px;
}

.cgl-21 .cgl-21__stats article {
  background: oklch(1 0 0/.06);
  border: 1px solid color-mix(in oklab,var(--electric) 30%,transparent);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.cgl-21 .cgl-21__stats strong {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 1.2rem;
  color: var(--electric);
}

.cgl-21 .cgl-21__stats span {
  font-size: .72rem;
  color: oklch(0.7 0.02 220);
}
```

## JavaScript
```js
/* No JavaScript — skewY on the band, inverse skewY on its children; the inner grid renders level inside the tilt. */
```

How this works

The band applies transform: skewY(-4deg); every direct child applies skewY(4deg) to cancel it. Text, cards and grids inside render perfectly level while the band's top and bottom edges cut across the page at a true, seam-free angle. Adjacent sections tuck under the band with negative margins derived from one custom property: --skew-gap: calc(tan(4deg) * 50vw) — CSS trigonometry sizing the overlap exactly.

Inside the band, a standard three-up RAM grid holds the stat cards, proving the counter-skew wrapper is transparent to layout. Because the skew is a transform, it's compositor-only: no layout thrash, no repaint on scroll, works with sticky headers.

Make it yours

  • Change the angle once (--angle) — skew, counter-skew and overlap math all reference it.
  • Alternate direction per band (+4deg / −4deg) for a zigzag page rhythm.
  • Layer a second skewed band behind at a slightly different angle for depth.
  • Keep angles between 2–6deg; beyond that, counter-skewed text starts optically drifting.

Gotchas — read before shipping

  • Every DIRECT child needs the counter-skew — a forgotten wrapper renders its subtree tilted.
  • Skew changes the element's painted bounds: add padding-block derived from the same tan() so content clears the diagonal edges.
  • Focus outlines skew with the element; keep interactive elements inside the counter-skewed children.

Browser support

ChromeSafariFirefoxEdge
111+15.4+108+111+

tan() needs 2023 engines — hardcode the overlap (tan 4° ≈ 0.07) for older targets. The skew pair itself is ancient and universal.

Techniques used in this demo

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

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →