如何创建可自定义行列跨度的灵活CSS Grid布局？

我想用CSS（Flexbox或Grid）创建一个灵活的网格，能自主控制最终呈现效果，需要创建4个类来控制网格项的宽高。我尝试用Grid实现并写了代码，但作为Grid新手没达到预期效果。最终网格固定为4列，行数不确定。

原始代码如下：

<div class="container">
  <div class="item grid-col-span-2">
    <img src="https://placehold.co/600" />
  </div>
  <div class="item grid-col-span-2">
    <img src="https://placehold.co/400" />
  </div>
  <div class="item"><img src="https://placehold.co/300" /></div>
  <div class="item"><img src="https://placehold.co/400" /></div>
  <div class="item"><img src="https://placehold.co/500" /></div>
  <div class="item"><img src="https://placehold.co/600" /></div>
  <div class="item"><img src="https://placehold.co/700" /></div>
</div>

.grid-col-span-2 {
  grid-column: span 2;
}

.grid-row-span-2 {
  grid-row: span 2;
}

.container {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  overflow: hidden;
}

.item {
  width: 100%;
  overflow: hidden;
}

.item img {
  object-fit: cover;
}

要实现你需要的灵活网格，基于现有Grid代码调整即可，核心是完善网格项的空间填充逻辑，并利用4个类精确控制宽高：

• grid-col-span-1：占1列宽度（默认行为，可省略类名）
• grid-col-span-2：占2列宽度
• grid-row-span-1：占1行高度（默认行为，可省略类名）
• grid-row-span-2：占2行高度

修改后的完整代码：

<div class="container">
  <!-- 占2列2行的大项 -->
  <div class="item grid-col-span-2 grid-row-span-2">
    <img src="https://placehold.co/600" />
  </div>
  <!-- 占2列1行的项 -->
  <div class="item grid-col-span-2">
    <img src="https://placehold.co/400" />
  </div>
  <!-- 占1列1行的项 -->
  <div class="item"><img src="https://placehold.co/300" /></div>
  <div class="item"><img src="https://placehold.co/400" /></div>
  <div class="item"><img src="https://placehold.co/500" /></div>
  <div class="item grid-row-span-2"><img src="https://placehold.co/600" /></div>
  <div class="item"><img src="https://placehold.co/700" /></div>
</div>

/* 列跨度控制类 */
.grid-col-span-1 {
  grid-column: span 1;
}
.grid-col-span-2 {
  grid-column: span 2;
}

/* 行跨度控制类 */
.grid-row-span-1 {
  grid-row: span 1;
}
.grid-row-span-2 {
  grid-row: span 2;
}

.container {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  overflow: hidden;
}

.item {
  width: 100%;
  height: 100%;
  display: grid; /* 让图片自动填充网格项空间 */
  overflow: hidden;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片不变形且填满区域 */
}

关键修改说明 #

1. 给.item添加height: 100%和display: grid，确保网格项能填满分配的Grid空间，同时让图片自动继承容器尺寸
2. 给图片设置width: 100%; height: 100%，配合object-fit: cover解决图片拉伸变形问题
3. 补充了grid-col-span-1和grid-row-span-1类，让4个控制类完整，方便统一管理网格项的宽高规则

你可以根据需求给任意网格项组合这4个类，实现灵活的布局效果。

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