CSS布局求助：同列表首项在图片下方，后三项在图片右侧

用CSS Grid布局可以完美实现这个需求，既能保证四个列表项属于同一个列表，又能精准控制图片和列表项的位置：

完整代码 #

CSS #

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "img list"
    "item1 list";
  gap: 15px;
  padding: 10px;
}

.image {
  grid-area: img;
  max-width: 200px;
  height: auto;
  object-fit: cover;
}

.list-container {
  grid-area: list;
}

.list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list .list-item:first-child {
  grid-area: item1;
  margin: 0;
}

.list-item {
  margin-bottom: 1.5rem;
}

HTML #

<div class="container">
  <img src="https://www.w3schools.com/html/workplace.jpg" alt="Image" class="image" />
  <div class="list-container">
    <ul class="list">
      <li class="list-item">List Item 1</li>
      <li class="list-item">List Item 2</li>
      <li class="list-item">List Item 3</li>
      <li class="list-item">List Item 4</li>
    </ul>
  </div>
</div>

关键布局逻辑 #

• 外层.container通过Grid划分出两列两行的布局区域，用grid-template-areas给各个元素指定位置
• 图片.image占据左上角的两个行高区域（同时覆盖第一行和第二行的第一列）
• 列表容器.list-container占据右侧整列区域，列表的第2、3、4项会自然在这个区域垂直排列
• 通过grid-area把列表的第一个项单独放到图片下方的位置，保证它和图片同列，且在图片下方

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