如何将grid与flex布局的两个div上下垂直排列？

你可以通过控制它们的父容器布局来实现上下排列，以下是几种简单可行的方法：

方法1：用Flex布局父容器 #

给包含game和scores的父容器设置垂直方向的Flex布局，子元素会自动上下排列：

.parent-container {
  display: flex;
  flex-direction: column;
  /* 可选：添加两个div之间的间距 */
  gap: 15px;
}

这种方法兼容性好，不管子元素内部用Grid还是Flex布局，都不会影响整体的垂直排布。

方法2：利用块级元素默认行为 #

div本身是块级元素，默认会独占一行、上下排列。如果当前没生效，检查是否给game或scores设置了display: inline/inline-block、float这类属性，重置即可：

.game, .scores {
  display: block; /* 恢复默认块级特性 */
  float: none; /* 清除可能的浮动设置 */
}

方法3：用Grid布局父容器 #

如果父容器采用Grid布局，直接设置两行布局规则即可：

.parent-container {
  display: grid;
  grid-template-rows: auto auto; /* 两行高度自适应内容 */
  gap: 15px; /* 可选：添加间距 */
}

不管用哪种方法，核心都是通过父容器的布局规则，强制两个子div按垂直方向排列，子元素内部的Grid/Flex布局不会受到影响。

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