CSS Grid容器设置grid-template-row:1fr重复后溢出问题及解决

问题场景 #

为Grid主容器设置grid-template-rows: 1fr 1fr 1fr 1fr后，网格出现溢出，浏览器检查显示单个1fr轨道高度达834px；为header容器设置height:250px后，列布局有变化，但行轨道仍保留834px高度，导致第二行出现大片空白。需求是设置主容器后下方元素能紧跟排列，且仅用Grid实现。

问题原因 #

Grid容器默认高度由内部内容决定，未设置明确高度时，1fr的计算会基于容器的自动高度（即被内容撑开的高度）。此时即使单独修改子元素的height，Grid行轨道的高度已经基于容器初始的自动高度完成计算，不会自动调整，因此出现轨道高度过大、空白残留的情况。

解决方案 #

为主容器添加height: 100vh，让容器高度占满当前视口高度。此时grid-template-rows中的1fr会基于视口高度进行分配，行轨道高度自适应视口，既解决溢出问题，也能让下方元素紧跟排列。

修改后代码 #

HTML #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Holy Grail Mockup</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">

    <div class="header">
      <div class="logo">Header Logo</div>
      <div class="menu">
        <ul>
          <li>header link one</li>
          <li>header link two</li>
          <li>header link three</li>
          <li>header link four</li>
        </ul>
      </div>
    </div>

    <div class="sidebar">
      <div class="photo">
        <p>placeholder for image</p>
      </div>
      <div class="side-content">Box 1
      </div>
      <div class="side-content">Box 2
      </div>
      <div class="side-content">Box 3
      </div>
    </div>

    <div class="nav">
      <ul>
        <li>Latest Articles</li>
        <li>Most Views</li>
        <li>Featured</li>
      </ul>
    </div>

</div>
</body>

</html>

CSS #

* {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  text-align: center;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 4px;
  overflow: hidden;
  height: 100vh; /* 添加此行解决问题 */
}

.container div {
  padding: 15px;
  font-size: 32px;
  font-family: Helvetica;
  font-weight: bold;
  color: white;
}

.header {
  display: grid;
  background-color: #393f4d;
  grid-template-columns: 20% 80%;
  grid-column: 1/3;
  height: 200px;
}

.logo {
  display: grid;
  justify-content: flex-start;
}


.menu ul,
.menu li {
  display: grid;
  white-space: nowrap;
  align-items: flex-start;
  grid-template-columns: repeat(4, 1fr);
  font-size: 16px;
  list-style: none;
  margin-top: 8px;
  margin-inline: 115px;
}

.sidebar {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  background-color: #FF7755;
  grid-column: 1/2;
  grid-row: 2/4;
  gap: 50px;
  text-align: center;
}

.sidebar .photo {
  display: grid;
  align-items: center;
  justify-items: center;
  background-color: white;
  color: black;
  font-size: 12px;
  font-weight: normal;
  border-radius: 10px;
}

.sidebar .side-content {
  display: grid;
  align-items: center;
  justify-items: center;
  background-color: white;
  color: black;
  font-size: 16px;
  font-weight: normal;
}

.nav {
  display: grid;
  background-color: #FF7755;
  grid-template-columns: 100%;
  grid-column: 2/3;
  grid-row: 2/3;
  height: 2vh;
}

.nav ul,
.nav li {
  display: grid;
  grid-auto-flow: column;
  font-size: 16px;
  text-transform: uppercase;
  list-style: none;
}

.article {
  display: grid;
  background-color: #bccbde;
  grid-column: 2/3;
  grid-row: 3/4;
}

.article p {
  font-size: 18px;
  font-family: sans-serif;
  color: white;
  text-align: left;
}

.article .card {
  background-color: #FFFFFF;
  color: black;
  text-align: center;
}

.card p {
  color: black;
  font-weight: normal;
  font-size: 14px;
}

.card .title {
  font-size: 18px;
  text-align: center;
}

.footer {
  background-color: #393f4d;
}

.footer p {
  font-size: 13px;
  font-weight: normal;
}

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