如何在CSS Grid的横竖屏布局中使用aspect-ratio维持元素宽高比

嘿，我明白你遇到的问题了——横竖屏切换时，正方形元素要么拉伸变形要么溢出重叠，确实挺头疼的。咱们先拆解一下问题根源，再一步步解决。

问题分析 #

你当前的代码里，.inner用了Flexbox垂直布局，.square加了flex-grow:1和aspect-ratio:1。横屏时，.inner的宽度大于高度，正方形的宽度由容器宽度决定，aspect-ratio让高度匹配宽度，刚好能占满剩余空间，所以没问题。但竖屏时，.inner的高度远大于宽度，flex-grow:1会强制正方形拉伸到容器剩余高度，而aspect-ratio:1又要求宽度等于这个被拉伸后的高度，结果正方形宽度就超出了.inner的范围，自然就和相邻元素重叠了。

最优解决方案：把.inner换成Grid布局 #

其实不用纠结Flexbox的align-items切换，直接给.inner改成Grid布局，就能完美适配横竖屏：

修改后的CSS代码如下：

.container {
  width: 100vw;
  height: 100vh;
  background: lightblue;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  padding: 10px; /* 可选，防止边缘元素贴紧屏幕 */
}

.inner {
  background: lightpink;
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行自适应标题高度，第二行留给正方形 */
  place-items: center; /* 让标题和正方形都水平+垂直居中 */
  gap: 15px; /* 可选，标题和正方形之间的间距 */
  padding: 10px; /* 可选，内边距防止内容贴边 */
}

.square {
  background: lightgreen;
  aspect-ratio: 1;
  width: 100%; /* 让正方形最大宽度占满.inner */
  max-height: 100%; /* 限制正方形高度不超过第二行的可用空间 */
}

为什么这样有效？ #

• .inner用Grid分成两行：第一行自适应标题高度，第二行用1fr占满剩余空间，确保正方形有稳定的可用区域。
• place-items: center一步实现水平和垂直居中，不用再反复调整align-items或justify-content。
• .square的width:100%让它在横屏时最大化利用容器宽度，aspect-ratio:1自动匹配高度；竖屏时，max-height:100%会限制它的高度不超过第二行的空间，同时aspect-ratio会自动缩小宽度匹配高度，完美保持1:1的比例，不会溢出。

备选方案：调整Flexbox设置（如果坚持用Flex） #

如果不想改Grid，也可以调整Flex的配置，核心是去掉flex-grow:1，让正方形的尺寸由宽度主导，同时限制高度：

.inner {
  background: lightpink;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 让内容垂直居中 */
  gap: 15px;
  padding: 10px;
}

.square {
  background: lightgreen;
  aspect-ratio: 1;
  width: 100%;
  flex-shrink: 0; /* 防止被压缩 */
  max-height: calc(100% - 60px); /* 减去标题和内边距的大致高度，需根据实际情况调整 */
}

不过这种方法需要估算标题的高度，不如Grid方案灵活通用。

这样不管是横屏还是竖屏，正方形都能保持完美的1:1比例，不会溢出或重叠啦！

备注：内容来源于stack exchange，提问作者DanielGibbs