CSS Grid布局调整：实现1张全屏宽图+3张等宽小图的网格效果

只需调整CSS中网格的列模板和首项的网格跨度设置，即可达成需求效果：

修改要点 #

• 将ul的grid-template-columns改为repeat(3, 1fr)，创建三个等宽的基础列
• 给li:first-child设置grid-column: 1 / -1，让首图横跨所有列，占满整行宽度
• 移除原有的grid-row: span 2，因为首图仅需占据一行高度

完整代码 #

CSS

body {
  padding: 40px;
}

* {
  margin: 0px;
  padding: 0px;
}

ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  gap: 1rem;
}

li:first-child {
  grid-column: 1 / -1; /* 横跨所有列，占满整行 */
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML

<ul>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
</ul>

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