网格布局问题：部分容器无法移动到指定网格区域

profile-p-name-div无法通过grid-column/grid-row调整位置，是因为它不是网格容器.profile-preview-div的直接子元素——它嵌套在.profile-p-info中，而grid布局的定位属性仅对网格容器的直接子元素生效。.pfp-div是.profile-preview-div的直接子元素，所以你的调整能生效。

这里提供贴合你现有HTML结构的修改方案：给.profile-p-info添加grid布局，让它成为内部子元素的网格容器，同时先让它占据主网格的对应位置。

修改后的CSS代码 #

.profile-preview-div { 
  display: inline-block; 
  border-color: blue; 
  border-style: solid; 
  border-radius: 20px; 
  display: grid; 
  grid-template-columns: 20% 40% 40%; 
  grid-template-rows: repeat(3, 40px); 
  width: 200px; 
  zoom: 2; 
}

.pfp-div { 
  border-color: red; 
  border-style: solid; 
  border-radius: 5px; 
  width: 35px; 
  height: 39px; 
  margin: 0; 
  grid-column: 1 / 2; 
  grid-row: 2 / 3; 
}

.pfp-preview { 
  width: 100%; 
  border-radius: 50px; 
  border-color: black; 
  border-style: solid; 
}

/* 让.profile-p-info占据主网格的对应位置，并成为内部子元素的网格容器 */
.profile-p-info { 
  border-color: red; 
  border-style: solid; 
  border-radius: 5px; 
  width: 80%;
  grid-column: 2 / 4; 
  grid-row: 2 / 3;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 2px;
}

.profile-p-name-div { 
  margin: 0px; 
  border-color: red; 
  border-style: solid; 
  border-radius: 5px; 
  font-size: 10px; 
  /* 现在可以在父网格.profile-p-info内定位 */
  grid-row: 1 / 2;
}

.profile-p-name { margin: 0px; }

.profile-p-desc { 
  margin: 0px; 
  font-size: 8px; 
  color: grey; 
}

.profile-p-desc-div { 
  border-color: red; 
  border-style: solid; 
  grid-row: 2 / 3;
}

.profile-p-stats-div { 
  border-color: red; 
  border-style: solid; 
  border-radius: 5px; 
  grid-row: 3 / 4;
  display: flex;
  gap: 10px;
}

.profile-p-stats { 
  margin: 0px; 
  font-size: 8px; 
  color: navy; 
}

修改后的HTML代码（结构无变动） #

<!doctype html>
<html>
<head>
  <title> Javascript idk </title>
  <script src="java.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="profile-preview-div">
    <div class="pfp-div">
      <img src="/pfps/pic1.png" class="pfp-preview">
    </div>
    <div class="profile-p-info">
      <div class="profile-p-name-div">
        <p class="profile-p-name">asd_adventure</p>
      </div>
      <div class="profile-p-desc-div">
        <p class="profile-p-desc">i really like pizza lol</p>
      </div>
      <div class="profile-p-stats-div">
        <p class="profile-p-stats">Followers: 40</p>
        <p class="profile-p-stats">Following: 30</p>
      </div>
    </div>
</body>
</html>

关键调整说明 #

1. 先让.profile-p-info占据主网格的第2-4列、第2行，确保它和.pfp-div处于同一行
2. 给.profile-p-info设置display: grid，使其成为内部子元素的网格容器，这样.profile-p-name-div就能在这个子网格内自由定位
3. 给.profile-p-stats-div添加flex布局，让两个统计项横向排列，优化显示效果

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