Mise en page et adaptivité
Grille de cartes responsive

Construisez, avec CSS Grid, des cartes de voyage qui se réorganisent automatiquement.
HTMLCSSGridcartes
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Grille de cartes responsive</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; min-height: 100vh; padding: clamp(28px, 6vw, 72px) 20px; color: #28221e; font-family: "Palatino Linotype", "STSong", serif; background: #f2e8d4; }
    main { width: min(1180px, 100%); margin: auto; }
    header { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 32px; }
    .stamp { display: grid; width: 70px; height: 70px; place-items: center; border: 2px dashed #bd4d37; border-radius: 50%; color: #bd4d37; font: 800 12px/1.3 "Courier New", monospace; text-align: center; transform: rotate(8deg); }
    .eyebrow { color: #bd4d37; font: 800 12px/1 "Courier New", monospace; letter-spacing: .17em; }
    h1 { margin: 8px 0 0; font-size: clamp(40px, 7vw, 72px); line-height: .95; }
    .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
    article { position: relative; min-height: 310px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 24px; border: 1px solid rgba(61,46,36,.18); border-radius: 2px; color: #fff; isolation: isolate; box-shadow: 0 12px 30px rgba(74,52,34,.12); transition: transform .25s ease, box-shadow .25s ease; }
    article::before, article::after { content: ""; position: absolute; z-index: -2; }
    article::before { inset: 0; background: var(--scene); }
    article::after { inset: 38% 0 0; z-index: -1; background: linear-gradient(transparent, rgba(12,12,12,.78)); }
    article:hover { transform: translateY(-7px) rotate(-.4deg); box-shadow: 0 24px 44px rgba(74,52,34,.2); }
    article:nth-child(1) { grid-column: span 7; --scene: radial-gradient(circle at 72% 28%, #f8d486 0 8%, transparent 8.5%), linear-gradient(155deg, #688d8d 0 48%, #274d4d 48% 65%, #153939 65%); }
    article:nth-child(2) { grid-column: span 5; --scene: radial-gradient(circle at 35% 27%, #fff6df 0 7%, transparent 7.5%), linear-gradient(35deg, #784c5c 0 38%, #c77e69 38% 62%, #e9b77f 62%); }
    article:nth-child(3) { grid-column: span 4; --scene: repeating-linear-gradient(120deg, transparent 0 18px, rgba(255,255,255,.08) 19px 21px), linear-gradient(150deg, #5276a4, #1b3150); }
    article:nth-child(4) { grid-column: span 8; --scene: radial-gradient(ellipse at 50% 90%, #947547 0 24%, transparent 25%), linear-gradient(165deg, #d3aa69 0 52%, #865c36 52%); }
    .place { font: 800 11px/1 "Courier New", monospace; letter-spacing: .16em; }
    h2 { margin: 9px 0 7px; font-size: clamp(28px, 4vw, 42px); line-height: 1; }
    p { max-width: 480px; margin: 0; color: rgba(255,255,255,.78); font-family: "Avenir Next", "Microsoft YaHei", sans-serif; font-size: 13px; line-height: 1.6; }
    .arrow { position: absolute; top: 20px; right: 20px; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; font-family: sans-serif; }
    @media (max-width: 720px) { header { align-items: center; } .grid article { grid-column: 1 / -1; min-height: 290px; } }
    @media (max-width: 450px) { .stamp { display: none; } }
    @media (prefers-reduced-motion: reduce) { article { transition: none; } }
  </style>
</head>
<body>
  <main>
    <header><div><span class="eyebrow">WEEKEND FIELD NOTES</span><h1>Aller un peu plus loin</h1></div><div class="stamp">KEEP<br>ROAMING</div></header>
    <section class="grid" aria-label="Destination de voyage">
      <article><span class="arrow" aria-hidden="true">↗</span><span class="place">ZHEJIANG · 01</span><h2>Sentier côtier de montagne</h2><p>Traversez la pinède avant que la brume ne se dissipe, et laissez la brise marine devenir la première réplique du matin.</p></article>
      <article><span class="arrow" aria-hidden="true">↗</span><span class="place">YUNNAN · 02</span><h2>Coucher de soleil dans le canyon</h2><p>En longeant la paroi rocheuse rouge vers l’ouest, attendre que la vallée s’illumine sous le dernier rayon de lumière.</p></article>
      <article><span class="arrow" aria-hidden="true">↗</span><span class="place">SICHUAN · 03</span><h2>Ciel nocturne du plateau</h2><p>Éteignez toutes les lumières et levez les yeux vers la Voie lactée au-delà du camp.</p></article>
      <article><span class="arrow" aria-hidden="true">↗</span><span class="place">GANSU · 04</span><h2>Lettre des dunes</h2><p>Chaque jour, le vent réécrit le désert, et les empreintes n’ont qu’à consigner l’instant présent.</p></article>
    </section>
  </main>
</body>
</html>