如何用CSS在网格溢出时隐藏整个单元格

问题描述 #

我正在制作一个占满整个视口的网格布局，单元格为aspect-ratio:1的正方形，宽度随屏幕宽度缩放，高度同步变化。需求是：当底部的单元格部分超出屏幕视口时，将整个单元格完全隐藏，而非仅隐藏超出的部分。目前使用overflow属性只能隐藏单元格的超出部分，无法实现需求。

尝试过的方案均未解决：

• 给子元素添加overflow:hidden，导致单元格丢失aspect-ratio属性；
• 手动设置行数（类似设置列数的方式），但单元格内容无法适配行高。

HTML代码 #

<body>
  <div id="projects">
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
    <div><img src="https://baptiste-crepin.fr/repo-bg/Placeholder.png"></div>
  </div>
</body>
</html>

原始CSS代码 #

:root {
  --light-color: #e8e6e3;
  --grid-div-min-width: 200px;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: #282c2d;
  min-height: 100vh;
}

#projects {
  color: white;
  text-align: center;

  display: grid;
  width: 100vw;
  max-height: 100vh;
  gap: .2rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-div-min-width), 1fr));
  overflow: hidden;
}

#projects>div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  /*overflow: hidden;*/
}

#projects>div>img {
  position: absolute;
  z-index: -1;
  width: 100%;
  transition: 0.4s;
}

解决方案 #

通过调整网格容器的布局属性，让超出视口的整行单元格被完全隐藏，关键改动如下：

1. 移除body的justify-content: center，让网格从视口顶部开始排列，避免垂直居中导致上下都出现截断；
2. 将#projects的max-height: 100vh改为height: 100vh，确保容器严格占满视口高度；
3. 给#projects添加align-content: start，强制网格行从容器顶部开始排列，超出底部的行直接被overflow:hidden完全隐藏；
4. 保留单元格的aspect-ratio:1，确保始终为正方形。

修改后的完整CSS代码：

:root {
  --light-color: #e8e6e3;
  --grid-div-min-width: 200px;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  background: #282c2d;
  min-height: 100vh;
}

#projects {
  color: white;
  text-align: center;

  display: grid;
  width: 100vw;
  height: 100vh;
  gap: .2rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-div-min-width), 1fr));
  overflow: hidden;
  align-content: start;
}

#projects>div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
}

#projects>div>img {
  position: absolute;
  z-index: -1;
  width: 100%;
  transition: 0.4s;
}

原理说明 #

• align-content: start 确保网格行不会被拉伸或居中，而是从容器顶部依次排列；
• height:100vh 让容器高度严格等于视口高度，结合overflow:hidden，任何超出容器底部的行都会被完全隐藏；
• 单元格的aspect-ratio:1 保证宽度变化时高度同步，始终保持正方形。

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