HMWDigital Space

构建高级杂志风/拼图网格（Collage/Editorial Grid）的展示效果

Masterpiece Collage Grid
公元1368年-公元1644年

明代青花瓷

明代青花瓷

明代制瓷工艺在元代基础上得到了进一步的成熟和发展，尤其在永乐、宣德、成化朝达到鼎盛。是中国瓷器史上极为重要的时期。
宋代

大日如來坐像

台北故宫博物院

宋代青铜鎏金大日如来坐像
20世纪

Kodak Retina

Retina系列旁轴相机

柯达 Retina 系列相机
战国

金异兽

陕西历史博物馆

战国金异兽
明代

端石子石砚

台北故宮博物院

明代杨士奇铭端石子石砚
清代

翠毛蓝笔筒

私人收藏

清康熙翠毛蓝青花笔筒
金代

定窑弦纹樽

台北故宮博物院

金代定窑弦纹樽

Html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Masterpiece Collage Grid</title>
  
  <!-- 引入 Google 字体 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,600;1,400&display=swap" rel="stylesheet">

  <style>
    /* =====================
       Masterpiece Collage Grid (Fixed)
    ===================== */
    .hmw-masterpiece {
      --bg: #f7f5ef;
      --bg-hover: #f1eee6;
      --border-color: rgba(0, 0, 0, 0.4);

      box-sizing: border-box;
      max-width: 1200px;
      margin: 60px auto;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 20px;
      background: var(--bg);
    }

    .hmw-masterpiece *, 
    .hmw-masterpiece *::before, 
    .hmw-masterpiece *::after {
      box-sizing: inherit;
    }

    /* 基础卡片样式 */
    .hmw-masterpiece .hmw-card {
      display: block;
      background-color: var(--bg);
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0));
      color: inherit;
      text-decoration: none;
      min-height: 220px;
      border: 1px solid var(--border-color);
      overflow: hidden;
      position: relative;
      transition: background-color 0.3s ease, background-image 0.3s ease;
    }

    .hmw-masterpiece .hmw-card:hover {
      background-color: var(--bg-hover);
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0));
    }

    /* 卡片内部排版 */
    .hmw-inner {
      padding: 22px 22px 18px;
      height: 100%;
      position: relative;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .hmw-kicker {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0.85;
      margin-bottom: 10px;
    }

    .hmw-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(22px, 2.2vw, 36px);
      letter-spacing: 0.02em;
      margin: 0 0 10px;
      line-height: 1.2;
    }

    .hmw-sub {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      letter-spacing: 0.04em;
      line-height: 1.6;
      opacity: 0.9;
      margin: 0;
    }

    /* 普通卡片 (b/c/d/e/f/g) 的图片处理 */
    .hmw-masterpiece .hmw-card:not(.a) .hmw-ill {
      width: clamp(140px, 30%, 280px);
      height: auto;
      max-height: 180px;
      object-fit: contain;
      display: block;
      margin: 10px auto 0;
    }

    /* 🌟 主卡片 (Card A) 的修正重点 */
    .hmw-masterpiece .hmw-card.a .hmw-inner {
      padding: 30px 24px;
      justify-content: space-between; /* 均分上下空间 */
    }

    .hmw-masterpiece .hmw-card.a .hmw-ill {
      display: block;
      max-width: 220px;
      width: 100%;
      height: auto;
      max-height: 220px;
      object-fit: contain;
      margin: 20px auto;
    }

    .hmw-masterpiece .hmw-card.a .hmw-sub {
      max-width: 36ch;
      margin: 0 auto;
    }

    /* 桌面端网格布局定义 */
    .hmw-masterpiece .hmw-card.a { grid-column: 1 / span 4; grid-row: 1 / span 2; }
    .hmw-masterpiece .hmw-card.b { grid-column: 5 / span 4; grid-row: 1 / span 1; }
    .hmw-masterpiece .hmw-card.c { grid-column: 9 / span 4; grid-row: 1 / span 1; }
    .hmw-masterpiece .hmw-card.d { grid-column: 9 / span 4; grid-row: 2 / span 1; }
    .hmw-masterpiece .hmw-card.e { grid-column: 5 / span 4; grid-row: 2 / span 1; }
    .hmw-masterpiece .hmw-card.f { grid-column: 1 / span 6; grid-row: 3 / span 1; }
    .hmw-masterpiece .hmw-card.g { grid-column: 7 / span 6; grid-row: 3 / span 1; }

    /* 移动端自适应 (宽小于 900px) */
    @media (max-width: 900px) {
      .hmw-masterpiece {
        grid-template-columns: repeat(2, 1fr);
      }
      .hmw-masterpiece .hmw-card {
        grid-column: auto;
        grid-row: auto;
      }
      .hmw-masterpiece .hmw-ill {
        width: 55%;
      }
    }

    /* 极小屏幕单列自适应 (宽小于 500px) */
    @media (max-width: 500px) {
      .hmw-masterpiece {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>

<section class="hmw-masterpiece">
  <!-- Card A -->
  <a class="hmw-card a" href="https://houmengwei.com/collection-tag/明代青花/">
    <div class="hmw-inner">
      <div class="hmw-header">
        <div class="hmw-kicker">公元1368年-公元1644年</div>
        <h3 class="hmw-title">明代青花瓷</h3>
      </div>
      <img class="hmw-ill" src="https://houmengwei.com/wp-content/uploads/2026/03/b-w34.png" alt="明代青花瓷"> 
      <p class="hmw-sub">明代制瓷工艺在元代基础上得到了进一步的成熟和发展，尤其在永乐、宣德、成化朝达到鼎盛。是中国瓷器史上极为重要的时期。</p>
    </div>
  </a>

  <!-- Card B -->
  <a class="hmw-card b" href="https://houmengwei.com/collection/宋-青銅鎏金大日如來坐像/">
    <div class="hmw-inner">
      <div class="hmw-kicker">宋代</div>
      <h3 class="hmw-title">大日如來坐像</h3>
      <p class="hmw-sub">台北故宫博物院</p>
      <img class="hmw-ill" src="https://houmengwei.com/wp-content/uploads/2026/03/h3hfcoh3hfcoh3hf-removebg-preview.png" alt="宋代青铜鎏金大日如来坐像">
    </div>
  </a>

  <!-- Card C -->
  <a class="hmw-card c" href="https://houmengwei.com/collection/kodak-retina-35mm/">
    <div class="hmw-inner">
      <div class="hmw-kicker">20世纪</div>
      <h3 class="hmw-title">Kodak Retina</h3>
      <p class="hmw-sub">Retina系列旁轴相机</p>
      <img class="hmw-ill" src="https://houmengwei.com/wp-content/uploads/2026/03/304153645.png" alt="柯达 Retina 系列相机">
    </div>
  </a>

  <!-- Card D -->
  <a class="hmw-card d" href="https://houmengwei.com/collection/战国-西汉-金异兽/">
    <div class="hmw-inner">
      <div class="hmw-kicker">战国</div>
      <h3 class="hmw-title">金异兽</h3>
      <p class="hmw-sub">陕西历史博物馆</p>
      <img class="hmw-ill" src="https://houmengwei.com/wp-content/uploads/2026/03/x0nzdux0nzdux0nz-removebg-preview.png" alt="战国金异兽">
    </div>
  </a>

  <!-- Card E -->
  <a class="hmw-card e" href="https://houmengwei.com/collection/c-1368-1644-明-杨士奇铭端石子石砚/">
    <div class="hmw-inner">
      <div class="hmw-kicker">明代</div>
      <h3 class="hmw-title">端石子石砚</h3>
      <p class="hmw-sub">台北故宮博物院</p>
      <img class="hmw-ill" src="https://houmengwei.com/wp-content/uploads/2026/03/dsc00778-scaled.jpeg-removebg-preview.png" alt="明代杨士奇铭端石子石砚">
    </div>
  </a>

  <!-- Card F -->
  <a class="hmw-card f" href="https://houmengwei.com/collection/清康熙-翠毛蓝青花携琴访友图笔筒/">
    <div class="hmw-inner">
      <div class="hmw-kicker">清代</div>
      <h3 class="hmw-title">翠毛蓝笔筒</h3>
      <p class="hmw-sub">私人收藏</p>
      <img class="hmw-ill" src="https://houmengwei.com/wp-content/uploads/2026/03/a3daf236c6d265a1fdfd642e4b8a4f51.jpeg-removebg-preview.png" alt="清康熙翠毛蓝青花笔筒">
    </div>
  </a>

  <!-- Card G -->
  <a class="hmw-card g" href="https://houmengwei.com/collection/12c-ding-ware-xuanwenzun/">
    <div class="hmw-inner">
      <div class="hmw-kicker">金代</div>
      <h3 class="hmw-title">定窑弦纹樽</h3>
      <p class="hmw-sub">台北故宮博物院</p>
      <img class="hmw-ill" src="https://houmengwei.com/wp-content/uploads/2026/03/dsc01112-scaled.jpeg-removebg-preview.png" alt="金代定窑弦纹樽">
    </div>
  </a>
</section>

</body>
</html>
HOU‘s Digital Space > Projects > 构建高级杂志风/拼图网格（Collage/Editorial Grid）的展示效果

更多文章