Grid容器布局问题：Pokédex页面固定容器与布局需求求助

问题概述 #

你需要的布局是：

• search容器在左上角
• Pokémon List（包含Pokémon Card）放在search下方的pokedex容器内
• Pokémon Info固定在右侧

当前遇到的问题是：修改Pokémon Card的尺寸时，pokedex容器会跟着被撑开，无法保持固定尺寸。

解决方案 #

核心是给pokedex容器添加明确的尺寸约束和溢出处理，同时优化内部列表的布局逻辑：

1. 给.pokedex设置overflow: auto，让内部内容超出时滚动，避免撑大容器
2. 用grid-template-rows明确网格行的分配规则，让pokedex占用固定的剩余空间
3. 调整.pokemonList的网格列配置，让卡片自适应容器宽度，避免硬编码导致的容器撑开问题

修改后的完整CSS代码 #

* {
  box-sizing: border-box;
}

.search {
  grid-area: search;
  background-color: rgb(255, 255, 255);
  text-align: center;
  height: 100%;
}

.pokedex {
  grid-area: pokedex;
  background-color: rgb(250, 250, 250);
  height: 100%;
  overflow: auto; /* 关键：内容超出时滚动，不撑大容器 */
}

.pokemon_info {
  grid-area: pokemon_info;
  background-color: rgb(172, 166, 155);
  height: 97vh;
}

.grid-container {
  display: grid;
  grid-template-areas:
    "search search pokemon_info pokemon_info pokemon_info"
    "pokedex pokedex pokemon_info pokemon_info pokemon_info"
    "pokedex pokedex pokemon_info pokemon_info pokemon_info";
  grid-template-rows: auto 1fr; /* search行自适应高度，pokedex占剩余垂直空间 */
  padding: 5px;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-color: antiquewhite;
}
.grid-item {
  border: 1px solid rgba(202, 179, 130, 0.8);
  font-size: 30px;
  text-align: center;
  padding: 1rem;
}

.pokemonList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列数，最小卡片宽度200px */
  list-style: none;
  gap: 0.5rem; /* 用gap替代margin，布局更整洁 */
  padding: 0;
}

.pokemonCard {
  background-color: green;
  border-radius: 0.5rem;
  border: 1px solid black; /* 补充完整border样式 */
  padding: 0.5rem;
  height: 110px;
}

关键调整说明 #

• grid-template-rows: auto 1fr确保search区域只占用自身内容高度，pokedex固定占用剩余的全部垂直空间
• .pokedex的overflow: auto保证卡片数量增多或尺寸调整时，容器尺寸不变，超出内容通过滚动查看
• repeat(auto-fit, minmax(200px, 1fr))让Pokémon Card自适应pokedex宽度，自动调整列数，避免硬编码列数导致的布局冲突

HTML部分保持原代码即可。

内容的提问来源于stack exchange，提问作者Bernardo Velloso Mendonça