如何阻止CSS Grid布局中同行元素随目标元素展开而增高？

我的代码整体运行正常，但存在一个小问题：当我切换展开某个球员的信息框时，同一行的其他球员信息框也会随之展开。请问有什么方法可以避免这种情况？

问题根源是Grid布局的默认行为：同一行的所有网格单元格会被自动拉伸至相同高度。当某个球员卡片添加active类后高度增加，同行的其他卡片会被强制拉高，导致原本隐藏的.playerData区域被“拉出来”显示，并非真的触发了展开逻辑。

只需给.player类添加align-self: start属性，让每个网格单元格保持自身高度，不被同行元素影响：

.player {
  background-color: rgb(168, 21, 21);
  width: fit-content;
  box-shadow: 0px 2px 3px 4px rgba(255, 255, 255, .5);
  border-radius: 10px;
  margin: 20px;
  align-self: start; /* 新增这一行 */
}

HTML #

<h1>Hello World</h1>
<div class="container">
  <!--<div class="player">
        <img class="image" src="img/jesus.png">
        <div class="playerData">
            <h3 class="name">Gabriel Jesus</h3>
            <h3 class="age">25</h3>
            <h3 class="country">Brazil</h3>
        </div>
    </div>-->
</div>

CSS #

* {
  margin: 0;
  padding: 0
}

body {
  background-color: rgb(203, 17, 17);
  font-family: arial;
}

.container {
  background-color: aquamarine transparent;
  width: fit-content;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto;
}

.player {
  background-color: rgb(168, 21, 21);
  width: fit-content;
  box-shadow: 0px 2px 3px 4px rgba(255, 255, 255, .5);
  border-radius: 10px;
  margin: 20px;
  align-self: start; /* 新增属性 */
}

.player img {
  width: 200px;
  height: 200px;
  padding: 5px
}

.playerData {
  display: none;
  max-height: 0;
}

.player.active .playerData {
  background-color: rgb(118, 11, 11);
  padding: 5px;
  border-radius: 0px 0px 10px 10px;
  max-height: 200px;
  display: block;
}

h3 {
  color: white
}

JavaScript #

const arsenal = {
    name: 'Arsenal',
    city: 'London',
    startingLineup: {
        gk: {name:'Aaron Ramsdale', age: 24, country:'England', img:'img/ramsdale.png'},
        lb: {name:'Oleksandr Zinchenko', age: 26, country:'Ukraine', img: 'img/zinchenko.jpg'},
        rb: {name:'Ben White', age: 25, country:'England', img: 'img/white.png'},
        lcb: {name:'Gabriel Magalhaes', age: 25, country:'Brazil',img: 'img/gabriel.png'},
        rcb: {name: 'William Saliba', age: 22, country:'France', img: 'img/saliba.png'},
        cdm: {name:'Thomas Partey',age: 29,country:'Ghana', img: 'img/partey.png'},
        cm: {name:'Granit Xhaka',age:30,country:'Switzerland',img: 'img/xhaka face.png'},
        cam: {name:'Martin Odegaard',age:23,country:'Norway',img: 'img/odegaard.png'},
        lw: {name:'Gabriel Martinelli',age:21, country:'Brazil',img: 'img/martinelli.png'},
        rw: {name:'Bukayo Saka',age:21,country:'England',img:'img/saka.png'},
        st: {name:'Gabriel Jesus',age:26,country:'Brazil', img: 'img/jesus.png'}
    }
}

let container = document.querySelector(".container")

Object.entries(arsenal.startingLineup).forEach(([key,value]) => {
    let player = document.createElement("div")
    let playerData = document.createElement("div")

    let image = document.createElement("img")
    let name = document.createElement("h3")
    let age = document.createElement("h3")
    let country = document.createElement("h3")

    image.src = value.img
    let nameNode = document.createTextNode(value.name)
    let ageNode = document.createTextNode(value.age)
    let countryNode = document.createTextNode(value.country)

    name.appendChild(nameNode)
    age.appendChild(ageNode)
    country.appendChild(countryNode)

    image.classList.add("image")
    name.classList.add("h3")
    age.classList.add("h3")
    country.classList.add("h3")

    playerData.append(name, age, country)
    player.append(image, playerData)

    playerData.classList.add("playerData")
    player.classList.add("player")

    container.appendChild(player)

    player.addEventListener("click",() => {
        player.classList.toggle("active")
    })
})

let title = document.querySelector("h1")
title.innerHTML = arsenal.name

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