如何用Grid布局仅显示3列并隐藏其余内容？

方案一：CSS/SCSS直接隐藏多余元素（最简单） #

如果需求是仅显示前3个元素并排成3列，其余元素直接隐藏，无需调整容器高度，用CSS选择器就能快速实现：

CSS示例 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列等宽分配空间 */
  gap: 1rem; /* 可选，设置列/行间距 */
}

/* 隐藏第4个及以后的所有子元素 */
.grid-container > :nth-child(n+4) {
  display: none;
}

SCSS示例（支持变量复用） #

$show-columns: 3;

.grid-container {
  display: grid;
  grid-template-columns: repeat($show-columns, 1fr);
  gap: 1rem;
  
  // 动态计算要隐藏的元素起始位置
  > :nth-child(n+#{$show-columns + 1}) {
    display: none;
  }
}

方案二：调整容器高度隐藏多余内容（符合你的思路） #

如果Grid是自动换行布局（比如用auto-fill/auto-fit），只想显示第一行的3列内容，其余行隐藏，可以通过设置容器高度+overflow:hidden实现。

固定元素高度场景（纯CSS） #

如果网格项高度固定，直接计算容器高度：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px); /* 自动填充200px宽的列 */
  gap: 1rem;
  height: 200px; /* 等于网格项的高度 */
  overflow: hidden; /* 超出容器高度的内容隐藏 */
}

元素高度不固定场景（JavaScript动态计算） #

如果网格项高度不确定，用JS计算第一行的最大高度，再设置容器高度：

const gridContainer = document.querySelector('.grid-container');
if (!gridContainer) return;

// 筛选出第一行的所有网格项（top偏移量和第一个元素一致）
const firstRowItems = Array.from(gridContainer.children).filter(item => 
  item.offsetTop === gridContainer.firstElementChild.offsetTop
);

// 计算第一行的最大高度
const maxItemHeight = Math.max(...firstRowItems.map(item => item.offsetHeight));

// 设置容器高度，若有行间距可自行添加对应值
gridContainer.style.height = `${maxItemHeight}px`;
gridContainer.style.overflow = 'hidden';

方案三：限制容器宽度隐藏多余列 #

如果Grid定义了多列（比如5列），但只想显示前3列，其余列隐藏，通过设置容器宽度实现：

CSS示例 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 200px); /* 定义5列 */
  gap: 1rem;
  /* 计算3列的总宽度：3*列宽 + 2*列间距 */
  width: calc(3 * 200px + 2 * 1rem);
  overflow: hidden;
}

SCSS示例 #

$col-width: 200px;
$show-cols: 3;
$gap: 1rem;

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, $col-width);
  gap: $gap;
  width: calc(#{$show-cols} * #{$col-width} + (#{$show-cols} - 1) * #{$gap});
  overflow: hidden;
}

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