如何让CSS Grid嵌套Div可点击、Anchor标签居中并实现弹性行高

我正尝试在CSS Grid的嵌套div中居中锚标签（Link 1、Link 2、Link 3、Link 4），同时希望链接周围带有内边距（padding），但目前的实现存在问题。此外，如何在不通过grid-template-rows指定高度的情况下，实现Chart 1和Chart 2盒子的弹性行高？

当前效果 #

期望效果 #

现有代码 #

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', Verdana, Geneva, Tahoma, sans-serif;
}

main {
  width: 98 %;
  margin: 5 px 5 px;
  border: 1 px solid grey;
  display: grid;
  color: white;
  grid-template-rows: 60px 40px 300px 300px 60px;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}

.div-header {
  background-color: #ff4757;
  display: grid;
  grid-column: 1 / -1;
}

.page-navbar {
  grid-template-rows: 1fr;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10 px;
  background-color: #EEF5FB;
  color: #000;
}

.div-box1 {
  color: #000;
  border-right: 1px solid skyblue;
}

.div-link {
  text-align: center;
}

.page-navbar a {
  color: #000;
  text-decoration: none;
}

.div-box2 {
  border-right: 1px solid skyblue;
}

.div-box3 {
  border-right: 1px solid skyblue;
}

.div-box4 {}

.div-main-1 {
  color: #000;
  background-color: lightblue;
  grid-column: 1 / -1;
}

.div-main-2 {
  color: #000;
  background-color: lightblue;
  grid-column: 1/-1;
}

.div-footer {
  background-color: steelblue;
  grid-column: 1/-1;
}

nav {
  width: 100%;
  background-color: steelblue;
  padding-left: 30px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: inline-block;
}

.nav-links {
  list-style: none;
  display: inline-block;
  display: flex;
}

.nav-item a {
  padding: 10px 15px;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}

HTML代码 #

<main>
  <div class="div-header">
    <nav>
      <a href="#" class="logo">
        <img src="water_drop_black_24dp.svg" alt="logo" />
      </a>
      <ul class="nav-links">
        <li class="nav-item"><a href="#">Page 1</a></li>
        <li class="nav-item"><a href="#">Page 2</a></li>
        <li class="nav-item"><a href="#">Profile</a></li>
        <li class="nav-item"><a href="#">Logout</a></li>
      </ul>
    </nav>
  </div>
  <div class="page-navbar">
    <div class="div-box1">
      <a href="#" class="div-link">Link 1</a>
    </div>
    <div class="div-box2">
      <a href="#">Link 2</a>
    </div>
    <div class="div-box3">
      <a href="#">Link 3</a>
    </div>
    <div class="div-box4">
      <a href="#">Link 4</a>
    </div>
  </div>
  <div class="div-main-1">Chart 1</div>
  <div class="div-main-2">Chart 2</div>
  <div class="div-footer">Footer</div>
</main>

一、链接居中与内边距实现 #

当前问题在于导航栏的子div没有设置布局来居中内部链接，且链接的padding未正确生效。修改步骤：

1. 给所有导航子div添加居中布局：

   .page-navbar > div {
     display: grid;
     place-items: center; /* 同时实现水平+垂直居中 */
   }
   

2. 给链接添加padding并设置块级显示，确保padding生效且点击区域合理：

   .page-navbar a {
     color: #000;
     text-decoration: none;
     padding: 8px 16px; /* 自定义内边距大小 */
     display: block;
   }
   

3. 简化右侧边框代码，避免重复：

   .page-navbar > div:not(:last-child) {
     border-right: 1px solid skyblue;
   }
   

二、Chart盒子弹性行高实现 #

将main的grid-template-rows中固定高度的Chart行替换为fr单位，让它们自动分配剩余空间：

main {
  width: 98%;
  margin: 5px;
  border: 1px solid grey;
  display: grid;
  color: white;
  grid-template-rows: 60px 40px 1fr 1fr 60px; /* 用1fr分配剩余空间 */
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  min-height: 100vh; /* 可选：让容器至少占满视口高度 */
}

• 1fr表示占据剩余空间的1份，两个Chart行各占1份会平分剩余空间；若需要不同占比，可改为2fr 1fr这样的比例。
• 修正原代码中的语法错误（如width: 98 %改为width: 98%），确保样式正常生效。

修改后的完整CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', Verdana, Geneva, Tahoma, sans-serif;
}

main {
  width: 98%;
  margin: 5px;
  border: 1px solid grey;
  display: grid;
  color: white;
  grid-template-rows: 60px 40px 1fr 1fr 60px;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  min-height: 100vh;
}

.div-header {
  background-color: #ff4757;
  grid-column: 1 / -1;
}

.page-navbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  background-color: #EEF5FB;
  color: #000;
}

.page-navbar > div {
  display: grid;
  place-items: center;
}

.page-navbar > div:not(:last-child) {
  border-right: 1px solid skyblue;
}

.page-navbar a {
  color: #000;
  text-decoration: none;
  padding: 8px 16px;
  display: block;
}

.div-main-1 {
  color: #000;
  background-color: lightblue;
  grid-column: 1 / -1;
}

.div-main-2 {
  color: #000;
  background-color: lightblue;
  grid-column: 1/-1;
}

.div-footer {
  background-color: steelblue;
  grid-column: 1/-1;
}

nav {
  width: 100%;
  background-color: steelblue;
  padding-left: 30px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: inline-block;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-item a {
  padding: 10px 15px;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}

修改后的HTML代码 #

<main>
  <div class="div-header">
    <nav>
      <a href="#" class="logo">
        <img src="water_drop_black_24dp.svg" alt="logo" />
      </a>
      <ul class="nav-links">
        <li class="nav-item"><a href="#">Page 1</a></li>
        <li class="nav-item"><a href="#">Page 2</a></li>
        <li class="nav-item"><a href="#">Profile</a></li>
        <li class="nav-item"><a href="#">Logout</a></li>
      </ul>
    </nav>
  </div>
  <div class="page-navbar">
    <div class="div-box1">
      <a href="#">Link 1</a>
    </div>
    <div class="div-box2">
      <a href="#">Link 2</a>
    </div>
    <div class="div-box3">
      <a href="#">Link 3</a>
    </div>
    <div class="div-box4">
      <a href="#">Link 4</a>
    </div>
  </div>
  <div class="div-main-1">Chart 1</div>
  <div class="div-main-2">Chart 2</div>
  <div class="div-footer">Footer</div>
</main>

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