15 CSS Card Grid Layouts07 / 15

Pure CSSMIT licensed

CSS Asymmetric Bento Box Feature Grid

An Apple-style bento layout where one hero tile spans two columns and two rows while smaller tiles wrap around it using grid-column and grid-row spans on a dark, glow-bordered canvas.

Published

Live Demo
Try it

The code

<div class="cg-02">
  <div class="cg-02__grid">
    <div class="cg-02__tile cg-02__tile--hero" style="--glow:#7c6af7">
      <div class="cg-02__icon" style="background:#7c6af7"></div>
      <h3>Real-Time Sync Engine</h3>
      <p>Every change propagates across devices in under 80ms with conflict-free merge resolution.</p>
    </div>
    <div class="cg-02__tile" style="--glow:#00d4ff">
      <div class="cg-02__icon" style="background:#00d4ff"></div>
      <h3>Edge Caching</h3>
      <p>Global CDN with smart invalidation.</p>
    </div>
    <div class="cg-02__tile" style="--glow:#ff6b9d">
      <div class="cg-02__icon" style="background:#ff6b9d"></div>
      <h3>Zero-Config Auth</h3>
      <p>Drop-in identity, fully managed.</p>
    </div>
    <div class="cg-02__tile" style="--glow:#ffd166">
      <div class="cg-02__icon" style="background:#ffd166"></div>
      <h3>Usage Insights</h3>
      <p>Live dashboards, no setup.</p>
    </div>
    <div class="cg-02__tile" style="--glow:#34d399">
      <div class="cg-02__icon" style="background:#34d399"></div>
      <h3>Type-Safe SDKs</h3>
      <p>Generated clients for every stack.</p>
    </div>
  </div>
</div>
.cg-02,
.cg-02 *,
.cg-02 *::before,
.cg-02 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cg-02 ::selection {
  background: #7c6af7;
  color: #fff;
}

.cg-02 {
  --radius: 20px;
  background: #08070d;
  min-height: 100vh;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  padding: 48px 24px;
  color: #f5f5fa;
}

.cg-02__grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-auto-rows: 140px;
  gap: 18px;
}

.cg-02__tile {
  position: relative;
  grid-column: span 2;
  grid-row: span 1;
  border-radius: var(--radius);
  padding: 24px;
  background: linear-gradient(#0f0e18,#0f0e18) padding-box, linear-gradient(135deg, var(--glow), transparent 70%) border-box;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.cg-02__tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--glow), 0 20px 40px -20px var(--glow);
}

.cg-02__tile--hero {
  grid-column: span 2;
  grid-row: span 2;
}

.cg-02__tile h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.cg-02__tile--hero h3 {
  font-size: 1.4rem;
}

.cg-02__tile p {
  font-size: .82rem;
  color: rgba(245,245,250,.55);
  line-height: 1.45;
  margin-top: 2px;
}

.cg-02__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  margin-bottom: 4px;
  opacity: .9;
}

@media (max-width: 640px) {
  .cg-02__grid {
    grid-template-columns: repeat(2,1fr);
  }

  .cg-02__tile {
    grid-column: span 1;
  }

  .cg-02__tile--hero {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cg-02__tile {
    transition: none;
  }

  .cg-02__tile:hover {
    transform: none;
  }
}
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 Card 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: CSS Asymmetric Bento Box Feature Grid
Source: https://codefronts.com/layouts/css-card-grid-layout/css-asymmetric-bento-box-feature-grid/

An Apple-style bento layout where one hero tile spans two columns and two rows while smaller tiles wrap around it using grid-column and grid-row spans on a dark, glow-bordered canvas.
## HTML
```html
<div class="cg-02">
  <div class="cg-02__grid">
    <div class="cg-02__tile cg-02__tile--hero" style="--glow:#7c6af7">
      <div class="cg-02__icon" style="background:#7c6af7"></div>
      <h3>Real-Time Sync Engine</h3>
      <p>Every change propagates across devices in under 80ms with conflict-free merge resolution.</p>
    </div>
    <div class="cg-02__tile" style="--glow:#00d4ff">
      <div class="cg-02__icon" style="background:#00d4ff"></div>
      <h3>Edge Caching</h3>
      <p>Global CDN with smart invalidation.</p>
    </div>
    <div class="cg-02__tile" style="--glow:#ff6b9d">
      <div class="cg-02__icon" style="background:#ff6b9d"></div>
      <h3>Zero-Config Auth</h3>
      <p>Drop-in identity, fully managed.</p>
    </div>
    <div class="cg-02__tile" style="--glow:#ffd166">
      <div class="cg-02__icon" style="background:#ffd166"></div>
      <h3>Usage Insights</h3>
      <p>Live dashboards, no setup.</p>
    </div>
    <div class="cg-02__tile" style="--glow:#34d399">
      <div class="cg-02__icon" style="background:#34d399"></div>
      <h3>Type-Safe SDKs</h3>
      <p>Generated clients for every stack.</p>
    </div>
  </div>
</div>
```
## CSS
```css
.cg-02,
.cg-02 *,
.cg-02 *::before,
.cg-02 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cg-02 ::selection {
  background: #7c6af7;
  color: #fff;
}

.cg-02 {
  --radius: 20px;
  background: #08070d;
  min-height: 100vh;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  padding: 48px 24px;
  color: #f5f5fa;
}

.cg-02__grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-auto-rows: 140px;
  gap: 18px;
}

.cg-02__tile {
  position: relative;
  grid-column: span 2;
  grid-row: span 1;
  border-radius: var(--radius);
  padding: 24px;
  background: linear-gradient(#0f0e18,#0f0e18) padding-box, linear-gradient(135deg, var(--glow), transparent 70%) border-box;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.cg-02__tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--glow), 0 20px 40px -20px var(--glow);
}

.cg-02__tile--hero {
  grid-column: span 2;
  grid-row: span 2;
}

.cg-02__tile h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.cg-02__tile--hero h3 {
  font-size: 1.4rem;
}

.cg-02__tile p {
  font-size: .82rem;
  color: rgba(245,245,250,.55);
  line-height: 1.45;
  margin-top: 2px;
}

.cg-02__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  margin-bottom: 4px;
  opacity: .9;
}

@media (max-width: 640px) {
  .cg-02__grid {
    grid-template-columns: repeat(2,1fr);
  }

  .cg-02__tile {
    grid-column: span 1;
  }

  .cg-02__tile--hero {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cg-02__tile {
    transition: none;
  }

  .cg-02__tile:hover {
    transform: none;
  }
}
```

How this works

A 4-column, auto-row grid (grid-template-columns: repeat(4, 1fr)) is the base. The hero tile gets grid-column: span 2; grid-row: span 2, occupying a 2×2 block while every other tile defaults to a single 1×1 cell, letting CSS auto-placement flow the remaining tiles around the reserved hole.

Each card's glow border is a pseudo-element trick: a ::before sized 1px larger than the card uses a conic or linear gradient background with border-radius matching the card, masked so only a 1px ring shows via padding plus a transparent inner background — giving a crisp gradient outline without an actual border-image.

Make it yours

  • Make the hero tile span the full width instead with grid-column: span 4 for a banner-led bento on narrower dashboards.
  • Adjust the glow ring colour per tile by overriding --glow on individual .cg-02__tile elements.
  • Change the base track count from 4 to 3 columns by editing repeat(4, 1fr) to repeat(3, 1fr) for a chunkier layout.
  • Swap the monochrome icons for any single-colour SVG by editing the .cg-02__icon background — keep strokes at currentColor for theme consistency.
  • Increase tile corner roundness via --radius at the .cg-02 root; all tiles and their glow rings inherit it automatically.

Gotchas — read before shipping

  • Explicit grid-row: span 2 on the hero only works cleanly when grid-auto-rows is a fixed value — using auto rows can make the span height unpredictable depending on sibling content.
  • On narrow viewports the 4-column track must collapse via a media query to repeat(2,1fr) with the hero span reduced to 2×1, otherwise spans overflow and create awkward empty gaps.
  • The gradient-ring pseudo-element technique needs background-clip: padding-box on the inner card or the gradient bleeds through the card's own background colour.

Browser support

ChromeSafariFirefoxEdge
57+10.1+52+57+

Grid spans are universally supported; the gradient-border padding-box trick needs background-clip support, available in all evergreen browsers.

Techniques used in this demo

grid-templateMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →