CSS Grid如何实现多列新闻列表布局？用grid-template-columns repeat控制列数

在新闻类网站或资讯页面的开发中，多列新闻列表是非常常见的布局需求，需要在不同屏幕尺寸下展示不同数量的列，同时保证列表项对齐、间距统一。使用CSS Grid的grid-template-columns属性结合repeat函数，可以非常高效地实现这类布局，不需要复杂的计算或额外的清除浮动操作。

基础布局实现

首先我们需要准备新闻列表的HTML结构，通常是一个容器包裹多个列表项，每个列表项包含新闻标题、摘要、发布时间等内容。

<div class="news-grid">
  <div class="news-item">
    <h3 class="news-title">新闻标题1</h3>
    <p class="news-desc">这是新闻1的摘要内容，简要描述新闻的核心信息</p>
    <span class="news-time">2023-10-01</span>
  </div>
  <div class="news-item">
    <h3 class="news-title">新闻标题2</h3>
    <p class="news-desc">这是新闻2的摘要内容，简要描述新闻的核心信息</p>
    <span class="news-time">2023-10-02</span>
  </div>
  <div class="news-item">
    <h3 class="news-title">新闻标题3</h3>
    <p class="news-desc">这是新闻3的摘要内容，简要描述新闻的核心信息</p>
    <span class="news-time">2023-10-03</span>
  </div>
  <div class="news-item">
    <h3 class="news-title">新闻标题4</h3>
    <p class="news-desc">这是新闻4的摘要内容，简要描述新闻的核心信息</p>
    <span class="news-time">2023-10-04</span>
  </div>
</div>

接下来通过CSS Grid设置容器样式，使用display: grid开启网格布局，grid-template-columns定义列的宽度和数量，repeat函数可以简化重复列的定义。

.news-grid {
  display: grid;
  /* repeat(3, 1fr) 表示3列，每列宽度相等，占剩余空间的1份 */
  grid-template-columns: repeat(3, 1fr);
  /* 列之间的间距 */
  gap: 20px;
  padding: 20px;
}

.news-item {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.news-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.news-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  line-height: 1.5;
}

.news-time {
  font-size: 12px;
  color: #999;
}

调整列数适配不同场景

repeat函数的第一个参数就是列数，我们可以直接修改这个值来调整新闻列表的列数。比如需要4列布局，只需要将grid-template-columns修改为repeat(4, 1fr)即可。

如果需要固定列宽，而不是自适应分配空间，可以将1fr替换为具体的像素值或rem值，比如repeat(3, 300px)表示3列，每列宽度300px，当容器宽度不足时，网格会自动换行。

/* 固定列宽的3列布局 */
.fixed-column-grid {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 20px;
  padding: 20px;
}

响应式多列布局实现

新闻列表通常需要适配不同屏幕尺寸，比如桌面端显示3列，平板端显示2列，手机端显示1列。我们可以结合媒体查询和repeat函数动态调整列数。

.news-grid {
  display: grid;
  /* 默认移动端1列 */
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  padding: 20px;
}

/* 平板端：屏幕宽度大于等于768px时显示2列 */
@media (min-width: 768px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 桌面端：屏幕宽度大于等于1200px时显示3列 */
@media (min-width: 1200px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

repeat函数的其他用法

repeat函数还支持更复杂的参数，比如repeat(auto-fill, minmax(250px, 1fr))，表示自动填充列，每列最小宽度250px，最大宽度1fr，容器宽度足够时会自动增加列数，不需要手动设置固定列数，非常适合新闻列表的自适应场景。

.auto-grid {
  display: grid;
  /* 自动填充列，每列最小250px，最大自适应 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

常见问题说明

• 列表项内容高度不一致时，Grid默认会让同一行的列表项高度保持一致，不需要额外设置，比传统浮动布局更方便
• 如果需要调整列表项的对齐方式，可以使用align-items和justify-items属性控制
• gap属性设置的是列间距和行间距，不需要像传统布局那样单独给列表项设置margin再处理边缘间距

CSS_Gridgrid-template-columnsrepeat多列新闻列表修改时间：2026-06-25 02:24:36