Web开发新手求助：网格区域内多元素无法垂直排列问题

嘿，我一眼就揪出问题根源啦！你给.redes容器加了display: flex，但Flexbox默认的排列方向是水平（flex-direction: row），所以Twitter时间线、YouTube视频这些嵌入式元素才会挤在同一行。要让它们垂直堆叠，只需要调整几个CSS属性就行，具体方案如下：

核心修改思路 #

• 给.redes设置flex-direction: column，强制元素垂直排列
• 给.redes添加gap: 20px，让元素间保持规整的间距（比手动加margin更简洁可控）
• 覆盖第三方组件的内联宽度，确保它们能适配容器尺寸，避免溢出或过窄

修改后的完整代码 #

CSS 部分 #

.caja{ 
  display: grid; 
  grid-gap: 20px; 
  grid-template-columns: 1fr 4fr 4fr 3fr 1fr; 
  grid-template-rows: 1fr repeat(4,6fr) 1.5fr; 
  grid-auto-flow: row; 
}
.caja .redes{ 
  grid-row: span 3; 
  background: yellow; 
  display: flex; 
  flex-direction: column; /* 关键：切换为垂直排列 */
  gap: 20px; /* 元素间的垂直间距 */
  justify-content: flex-start; /* 内容从顶部开始排列，避免空间浪费 */
  align-items: center; 
  text-align: center; 
  padding: 2rem; 
}
/* 强制第三方组件适配容器宽度 */
.caja .redes iframe,
.caja .redes .twitter-timeline {
  width: 100% !important; /* 覆盖组件自带的内联宽度样式 */
}

HTML 部分 #

<div class="caja">
  <div class ="redes">
    <a class="twitter-timeline" data-height="600px" data-theme="dark" href="https://twitter.com/arkfgo?ref_src=twsrc%5Etfw">Tweets by arkfgo</a>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    <iframe height="315" src="https://www.youtube.com/embed/9YffrCViTVk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

额外说明 #

• 我把justify-content从center改成了flex-start，这样内容会从容器顶部开始排列，避免垂直方向上的无效留白；如果你确实需要内容垂直居中，改回center即可
• 用!important覆盖第三方组件的内联宽度是因为Twitter和YouTube的嵌入式组件会自带固定宽度样式，不强制覆盖的话可能无法适配你的容器

内容的提问来源于stack exchange，提问作者Luis Arturo Flores SN