如何实现div容器内图片、按钮等元素垂直堆叠排列？

元素自动生成新列、无法纵向堆叠的问题来自两个配置遗漏：

• 商品卡片容器.item使用flex布局时，没有指定排列方向，flex默认是横向（row）排布，所有子元素会自动从左到右挤在同一行，宽度不够时就会触发外层grid生成隐式新列
• 外层grid列容器（#column_left/#column_right）没有显式定义列数，grid会根据子元素排布自动生成新列适配内容

只需要调整对应CSS规则即可，不需要改动HTML结构：

• 给.item添加flex-direction: column，强制内部元素从上到下垂直排列，可搭配gap属性控制元素间距
• 给两个外层grid列容器添加grid-template-columns: 1fr，强制容器只保留1列，禁止自动生成隐式列
• 可按需调整商品图高度、内边距优化视觉效果，建议给.item加上box-sizing: border-box避免内边距撑破容器边框

CSS部分 #

#column_left{
  display: grid;
  width:100%;
  height: 900px;
  border: solid 2px black;
  grid-template-rows: 33% 33% 33%;
  /* 强制单列表格，禁止自动生成隐式列 */
  grid-template-columns: 1fr;
}

#column_right {
  display: grid;
  width:100%;
  height: 900px;
  border: solid 2px black;
  /* 强制单列表格，禁止自动生成隐式列 */
  grid-template-columns: 1fr;
}

.item {
  border: solid 2px black;
  width: 100%;
  height: 100%;
  display: flex;
  /* 改为纵向排列内部元素 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 控制元素之间的垂直间距，可按需调整数值 */
  gap: 12px;
  padding: 16px;
  box-sizing: border-box;
}

.sample_img {
  height: 60%;
  width: auto;
  /* 保证图片不变形 */
  object-fit: contain;
}

HTML部分 #

<div class="item">
    <img class="sample_img" src="https://st2.depositphotos.com/3080513/7014/i/600/depositphotos_70144489-stock-photo-t-shirt-template.jpg">
    <p>Sticks T-shirt</p>
    <label for="size">Choose a Size</label>
    <select name="size" class="size" >
        <option value="XS">XS</option>
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="XL">XL</option>
        <option value="XXL">XXL</option>
    </select>
    <button class="addToCart" type="submit">Add to Cart</button>
</div>

调整后效果符合预期：商品图在最上方，下方依次是商品描述、尺寸选择标签、下拉框、加购按钮，所有元素在卡片内垂直居中纵向排布，不会再自动生成额外列，原有居中逻辑完全保留。

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