23 CSS Flip Cards 22 / 23

Dynamic Height Auto-Resizing Flip Card

A card that adapts its height fluidly to varying content lengths on the front versus the back — no explicit pixel heights, no JavaScript.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="fc-17">
  <div class="fc-17__heading">
    <h2>Dynamic-Height Auto-Resizing Flip Card</h2>
    <p>No fixed heights — adapts to any content length on front or back</p>
    <p style="margin-top:6px"><code>display:grid</code> + opacity/rotateY cross-fade</p>
  </div>
  <div class="fc-17__cards-row">
    <!-- Card A: short front, long back -->
    <div class="fc-17__card-wrap">
      <div class="fc-17__face fc-17__face--front">
        <div class="fc-17__f-label">Dynamic Card A</div>
        <div class="fc-17__f-title">Short Front</div>
        <div class="fc-17__f-teaser">This front face has minimal content. The back has much more.</div>
        <div class="fc-17__f-hint">Hover to expand →</div>
      </div>
      <div class="fc-17__face fc-17__face--back">
        <div class="fc-17__b-label">Full Detail · Back</div>
        <div class="fc-17__b-title">Extended Back Content</div>
        <div class="fc-17__b-body">The grid technique means this back face can contain as much content as needed and the card height will adapt automatically — no hardcoded pixel heights required.</div>
        <div class="fc-17__b-list">
          <div class="fc-17__b-item"><span class="fc-17__b-dot"></span>Both faces sit in the same CSS grid cell (1/1)</div>
          <div class="fc-17__b-item"><span class="fc-17__b-dot"></span>Opacity + rotateY creates the cross-fade flip</div>
          <div class="fc-17__b-item"><span class="fc-17__b-dot"></span>The tallest face dictates the wrapper height</div>
          <div class="fc-17__b-item"><span class="fc-17__b-dot"></span>No JavaScript needed — pure CSS grid trick</div>
        </div>
      </div>
    </div>
    <!-- Card B: long front, short back -->
    <div class="fc-17__card-wrap">
      <div class="fc-17__face fc-17__face--front">
        <div class="fc-17__f-label">Dynamic Card B</div>
        <div class="fc-17__f-title">Longer Front Content</div>
        <div class="fc-17__f-teaser">This card has a lot more text on the front — multiple paragraphs, a list of items, and a closing note — and still no height is specified anywhere in the CSS.</div>
        <div class="fc-17__b-list" style="margin-top:12px">
          <div class="fc-17__b-item"><span class="fc-17__b-dot" style="background:#f472b6"></span>Point one with some detail</div>
          <div class="fc-17__b-item"><span class="fc-17__b-dot" style="background:#f472b6"></span>Point two with some detail</div>
          <div class="fc-17__b-item"><span class="fc-17__b-dot" style="background:#f472b6"></span>Point three with some detail</div>
        </div>
        <div class="fc-17__f-hint">Hover for brief summary →</div>
      </div>
      <div class="fc-17__face fc-17__face--back">
        <div class="fc-17__b-label">TL;DR · Back</div>
        <div class="fc-17__b-title">Short Summary</div>
        <div class="fc-17__b-body">The grid stacking approach lets each face own its natural height. No JS. No fixed pixels.</div>
      </div>
    </div>
  </div>
  <div class="fc-17__note">
    Technique: both <code>.front</code> and <code>.back</code> use <code>grid-area: 1/1</code> so they overlap in the same grid cell. The tallest visible face sets the wrapper height. On hover, opacity fades to 0 while <code>rotateY(±90deg)</code> adds depth — a CSS-only auto-height flip card.
  </div>
</div>
.fc-17,.fc-17 *,.fc-17 *::before,.fc-17 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-17 ::selection{background:#8b5cf6;color:#fff}
.fc-17{
  --bg:#08060e;--violet:#8b5cf6;--purple:#a855f7;--white:#faf5ff;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 30%,#0f0820,#08060e 65%);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:24px;color:var(--white);
}
.fc-17__heading{text-align:center}
.fc-17__heading h2{font-size:16px;font-weight:700;color:var(--white)}
.fc-17__heading p{font-size:11px;color:rgba(250,245,255,.4);margin-top:4px}
.fc-17__heading code{background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.25);color:var(--violet);padding:1px 6px;border-radius:4px;font-size:11px}
/* The key technique: grid with 1 column so both faces stack,
   only the visible one takes up height */
.fc-17__cards-row{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.fc-17__card-wrap{
  width:280px;
  /* The magic: a grid container where both faces overlap in the same cell */
  display:grid;
  grid-template-rows:1fr;
}
/* hover trigger on wrapper */
.fc-17__card-wrap:hover .fc-17__face--front{opacity:0;transform:rotateY(90deg)}
.fc-17__card-wrap:hover .fc-17__face--back{opacity:1;transform:rotateY(0deg)}
.fc-17__face--front,.fc-17__face--back{
  /* overlap in same grid row */
  grid-area:1/1;
  border-radius:16px;
  transition:opacity .35s ease, transform .5s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.fc-17__face--front{
  background:linear-gradient(145deg,#130e28,#0a0718);
  border:1px solid rgba(139,92,246,.2);
  padding:24px;
  opacity:1;transform:rotateY(0deg);
}
.fc-17__face--back{
  background:linear-gradient(145deg,#0e1a28,#080f18);
  border:1px solid rgba(56,189,248,.2);
  padding:24px;
  opacity:0;transform:rotateY(-90deg);
  /* back starts hidden — no explicit height needed */
}
/* FRONT content — short */
.fc-17__f-label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--violet);font-weight:700;margin-bottom:10px}
.fc-17__f-title{font-size:18px;font-weight:800;color:var(--white);margin-bottom:8px}
.fc-17__f-teaser{font-size:13px;color:rgba(250,245,255,.5);line-height:1.6}
.fc-17__f-hint{font-size:10px;color:rgba(250,245,255,.2);margin-top:14px;letter-spacing:.08em}
/* BACK content — variable, longer */
.fc-17__b-label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#38bdf8;font-weight:700;margin-bottom:10px}
.fc-17__b-title{font-size:16px;font-weight:800;color:var(--white);margin-bottom:10px}
.fc-17__b-body{font-size:13px;color:rgba(250,245,255,.65);line-height:1.7}
.fc-17__b-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.fc-17__b-item{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:rgba(250,245,255,.6)}
.fc-17__b-dot{width:5px;height:5px;border-radius:50%;background:#38bdf8;flex-shrink:0;margin-top:5px}
/* card 2 has even more content */
.fc-17__card-wrap:nth-child(2) .fc-17__face--front{background:linear-gradient(145deg,#1a0e18,#0f0810)}
.fc-17__card-wrap:nth-child(2) .fc-17__face--back{background:linear-gradient(145deg,#0a1a0e,#060e08)}
.fc-17__card-wrap:nth-child(2) .fc-17__f-label{color:#f472b6}
.fc-17__card-wrap:nth-child(2) .fc-17__b-label{color:#4ade80}
.fc-17__card-wrap:nth-child(2) .fc-17__b-dot{background:#4ade80}
/* technique note */
.fc-17__note{
  max-width:580px;padding:16px 20px;border-radius:12px;
  background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.15);
  font-size:12px;color:rgba(250,245,255,.5);line-height:1.7;text-align:center;
}
.fc-17__note code{color:var(--violet);background:rgba(139,92,246,.12);padding:0 4px;border-radius:3px}
@media(prefers-reduced-motion:reduce){.fc-17__face--front,.fc-17__face--back{transition:none}}

How this works

Both the front and back faces use grid-area: 1 / 1 to overlap in the same CSS Grid cell within the wrapper — so the tallest visible face naturally sets the wrapper height. On hover, the front transitions to opacity:0; transform:rotateY(90deg) while the back transitions from opacity:0; transform:rotateY(-90deg) to its resting position, creating a cross-fade flip without a fixed containing height.

This approach trades true 3D depth for unlimited content flexibility — the standard backface-visibility technique requires a fixed height because both absolutely-positioned faces must fill an identically-sized container. The grid-overlap method is the modern CSS solution for flip cards in CMS-driven contexts where content length is unpredictable.

Customize

  • Add a third state by introducing a third grid-area:1/1 child and cycling through states using a JS class that increments through front, back, and detail.
  • Smooth the height change using transition: height .4s ease on the wrapper combined with a JS ResizeObserver that sets an explicit height during transitions.
  • Use this technique for an FAQ accordion — front shows the question, back shows the answer, and the grid wrapper auto-sizes to the answer length.
  • Add a slide direction to the cross-fade by using translateX(±20px) alongside the opacity transition for a directional reveal feel.
  • Nest multiple auto-height cards in a CSS Grid masonry layout for a Pinterest-style content wall.

Watch out for

  • The grid-overlap technique produces no true 3D depth — the flip is a cross-fade, not a perspective rotation; use a fixed-height container with preserve-3d if true 3D is required.
  • Screen readers see both front and back content simultaneously since neither is display:none — add aria-hidden="true" to the hidden face at each state.
  • The rotateY(90deg) mid-flip pause is not visible in this cross-fade approach — the easing curve must be carefully tuned so opacity and rotation feel synchronised.

Browser support

ChromeSafariFirefoxEdge
57+ 10.1+ 52+ 57+

CSS Grid grid-area stacking is universally supported in evergreen browsers; no experimental features required.

More from 23 CSS Flip Cards

Restaurant Menu Item Recipe CardStep-by-Step Process Map CardTravel Postcard Diagonal 3D Flip CardVertical Axis Top-to-Bottom Flip CardResponsive CSS Grid Flip Card MatrixInteractive Gift Card Coupon RevealClick-to-Flip JavaScript Toggle CardLuxury Product Card with 3D Cube Unfold FlipProduct Feature Comparison Flip CardE-commerce Pricing Plan CardBooking Event Ticket Fold CardMeet the Team Bio Card
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →