如何在CSS Grid中间命名列区域内自动放置网格项并调整列跨度？

云上老周

2026-6-28

问题

我有一个简单的4列CSS Grid布局，希望大部分内容落在中间的命名列区域内。需要调整网格项的列跨度，满足以下要求：

带small类的项占据1fr宽度并排成一行，且所有内容仍限制在中间区域
无需添加额外容器
未展示的网格项会使用网格的外侧区域
带或不带small类的项数量不固定，且需保持原有顺序

现有HTML代码：

<div class="grid">
  <p>Item</p>
  <p class="small">Item</p>
  <p class="small">Item</p>
</div>

现有CSS代码：

.grid {
  display:grid;
  grid-template-columns:
    [grid-start] 1fr
    [content-start] 1fr 1fr [content-end]
    1fr [grid-end]
  ;
}

.grid p {
  grid-column:content;
}

.grid .small {
  grid-column:content / span 1;
}

期望布局效果：
期望的网格布局示例

解决方案

可以通过调整网格项的grid-column属性和利用网格自动流特性实现需求，修改后的CSS如下：

.grid {
  display: grid;
  grid-template-columns:
    [grid-start] 1fr
    [content-start] 1fr 1fr [content-end]
    1fr [grid-end]
  ;
  /* 开启自动填充空位，让small项能在同一行排列 */
  grid-auto-flow: dense;
}

/* 默认项占据整个中间content区域 */
.grid p {
  grid-column: content;
}

/* small项占据中间区域的单个1fr列，依赖dense特性自动填充同行空位 */
.grid .small {
  grid-column: content-start / span 1;
}