CSS Grid中justify-content: end不生效，margin-top顶动上方元素问题求助

1. 文档流挤压问题
   你给.statistiquesRight设置的margin-top属于正常文档流的盒子外边距，会实际占据页面空间。你的这个元素位于所有上方元素的下方，加正的margin-top相当于在它上方新增了一块空白占位，总页面区域高度固定为100vh的情况下，上方元素自然会被向上挤压偏移。
2. Grid属性用错导致不生效
   你给网格容器.gridFirstTP加的justify-content: end是控制网格轨道水平方向对齐的属性，只有当网格总宽度小于容器宽度时才会生效，你定义的grid-template-columns: 1fr 2fr已经占满了容器宽度，自然不会有效果，你想控制垂直方向对齐应该用align-content属性。
3. 隐式网格行的问题
   你给.gridFirstTP只定义了3行grid-template-rows: auto auto auto，但.statistiquesRight用了grid-row: 4/4属于第4行，网格会自动生成高度为auto的隐式行，隐式行的位置和高度会受margin影响，反过来挤压上方高度为auto的显式行。

• 正常文档流：页面元素默认的排列规则，从上到下、从左到右依次排布，每个元素的margin、padding、border都会占用实际空间，相邻元素的位置会互相影响。
• Grid显式/隐式轨道：通过grid-template-columns/rows定义的是显式轨道，超出定义范围的网格会自动生成隐式轨道，默认尺寸为auto，会随内容/间距变化。
• Grid对齐属性：
  • justify-content：控制所有网格轨道在水平行轴的对齐
  • align-content：控制所有网格轨道在垂直块轴的对齐

两种方案按需选择：

方案1：不脱离文档流，固定上方行高 #

修改.gridFirstTP的行定义，把前3行的高度固定，避免被挤压：

.gridFirstTP {
  display: grid;
  /* 前3行按需求设置固定高度/比例，最后一行自适应 */
  grid-template-rows: 10vh 40vh 30vh auto;
  /* 垂直方向内容靠上对齐，避免被挤压 */
  align-content: start;
  grid-template-columns: 1fr 2fr;
  height: 100vh;
}

方案2：偏移不影响其他元素，用relative定位 #

删掉.statistiquesRight的margin-top，换成相对定位偏移，相对定位的偏移是相对于元素自身原有位置，不会占用额外空间，也不会影响其他元素：

.statistiquesRight {
  /* margin-top: 20%; 删掉这行 */
  position: relative;
  top: 20%;
  grid-column: 1/3;
  grid-row: 4/4;
  /* 其他原有属性保留 */
}

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