如何用CSS实现网格元素下方的全宽展开详情区域？

可以仅通过CSS实现需求，核心是利用CSS Grid的跨列特性或绝对定位，结合状态切换控制详情区显示。以下是两种可行方案：

方案一：基于CSS Grid跨列实现（推荐） #

这种方案利用Grid布局的原生特性，让详情区自动横跨所有列，布局逻辑更清晰。

1. 调整组件结构 #

增加状态控制选中项，将详情区与网格项同级放置：

const MyItems = () => {
  const [activeIndex, setActiveIndex] = useState(null);

  const Item = ({ item, index }) => (
    <div 
      className="grid-item" 
      onClick={() => setActiveIndex(activeIndex === index ? null : index)}
    >
      {/* 方形列表项内容 */}
    </div>
  );

  return (
    <div className="container">
      {itemList.map((item, index) => (
        <>
          <Item key={index} item={item} index={index} />
          {activeIndex === index && (
            <div className="expanded-section">
              {/* 当前选中项的详情内容 */}
              {item.detailContent}
            </div>
          )}
        </>
      ))}
    </div>
  );
};

2. 容器与详情区样式 #

.container {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-gap: 1rem;
  justify-content: space-evenly;
  grid-auto-flow: dense; /* 让元素自动填充网格空位，避免布局错乱 */
}

.grid-item {
  width: 150px;
  height: 150px;
  background-color: #e0e0e0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expanded-section {
  grid-column: 1 / -1; /* 从第一列延伸到最后一列，铺满容器全宽 */
  height: 300px;
  background-color: #f5f5f5;
  padding: 1rem;
}

原理说明 #

• grid-column: 1 / -1 是Grid布局的核心用法，-1代表网格容器的最后一列位置，直接让详情区占据整行宽度。
• grid-auto-flow: dense 确保插入详情区后，后续的网格项能自动调整位置填充空位，保持布局整齐。

方案二：基于绝对定位实现（不修改原有嵌套结构） #

如果想保留你最初的“网格项嵌套详情区”结构，可以用绝对定位突破网格项的宽度限制：

.container {
  position: relative; /* 作为详情区的定位父容器 */
  /* 原有Grid样式保持不变 */
}

.expanded-section {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 1rem); /* 定位到网格容器下方，调整间距 */
  height: 300px;
  background-color: #f5f5f5;
  display: none; /* 默认隐藏 */
}

/* 选中项的详情区显示 */
.grid-item-wrapper.active .expanded-section {
  display: block;
}

注意事项 #

• 需要给每个网格项的外层容器（.grid-item-wrapper）添加active类，控制详情区的显示/隐藏。
• 要注意容器的z-index设置，避免详情区被其他元素遮挡。

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