如何用CSS实现标题与图片分置顶部的两列列表布局？

核心思路 #

把标题、图片作为两列的固定头部，下方的列表项用多列布局（columns）实现自动均衡分布，同时用CSS Grid控制头部与列表容器的整体布局，兼顾响应式适配。

代码实现 #

<div class="container">
  <h2 class="column-title">Title</h2>
  <img src="your-image-url.jpg" alt="列顶部图片" class="column-image">
  <ul class="item-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
  </ul>
</div>

.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 桌面端两列布局 */
@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .column-title, .column-image {
    margin: 0 0 16px;
    align-self: start; /* 固定在列顶部 */
  }

  .item-list {
    grid-column: 1 / -1; /* 列表容器跨两列 */
    columns: 2;
    gap: 20px;
    list-style: none;
    padding: 0;
  }

  .item-list li {
    break-inside: avoid; /* 防止列表项被拆分到两列 */
    margin-bottom: 8px;
  }
}

/* 移动端单列布局 */
@media (max-width: 767px) {
  .column-title, .column-image {
    margin: 0 0 16px;
  }

  .item-list {
    columns: 1;
    list-style: none;
    padding: 0;
  }

  .item-list li {
    margin-bottom: 8px;
  }
}

方案优势 #

1. 头部位置固定：通过Grid布局将标题和图片分别锁定在左右列顶部，不会随浏览器宽度变化移位
2. 列表自动均衡：columns:2会自动将14个列表项平均分配到两列，无需手动控制数量
3. 响应式自然适配：移动端自动切换为单列，标题、图片、列表依次排列，符合移动端浏览习惯

备选纯Grid方案（灵活性稍弱） #

如果不想混用多列布局，也可以用纯Grid实现，但需要手动适配列表项数量：

@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .column-title {
    grid-column: 1;
    grid-row: 1;
  }

  .column-image {
    grid-column: 2;
    grid-row: 1;
  }

  .item-list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    grid-auto-flow: dense;
    list-style: none;
    padding: 0;
    grid-template-rows: repeat(7, auto); /* 14个项目/2列=7行，数量变化需手动修改 */
  }

  .item-list li {
    margin-bottom: 8px;
  }
}

原方案问题根源 #

• 直接给ul加columns:2时，标题、图片作为列表项会被自动拆分逻辑干扰，无法固定位置
• div/table布局无法自动均衡列内项目数量，不符合动态分配需求

内容的提问来源于stack exchange，提问作者Fred M