如何在Grid布局中将按钮纵向排列而非横向成行？

我尝试将两个及以上按钮排列成一列，先后使用了inline、inline-block、block等CSS display属性，但均未成功。我需要按钮呈上下堆叠的列状，而非横向成行显示。附上当前的Grid布局代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    .item1 {
      grid-area: header;
    }
    
    .item2 {
      grid-area: menu;
    }
    
    .item3 {
      grid-area: main;
    }
    
    .item4 {
      grid-area: right;
    }
    
    .item5 {
      grid-area: footer;
    }
    
    .grid-container {
      display: grid;
      grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
      gap: 10px;
      background-color: #2196F3;
      padding: 10px;
    }
    
    .grid-container>div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }
    
    .item2 {
      display: block;
    }
  </style>
</head>

<body>

  <h1>Grid Layout</h1>

  <div class="grid-container">
    <div class="item1">Title</div>
    <div class="item2">
      <button>Hello</button>
      <button>Bye-Bye</button>
    </div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
  </div>

</body>
</html>

另外Stack Exchange提示我的问题大部分是代码，我不知道该如何调整。

你之前给.item2设置display: block是作用在容器本身，并没有改变内部按钮的布局行为。要让按钮纵向堆叠，这里有几种简单可行的方法：

方法1：直接给按钮设置display: block #

给.item2内的按钮添加display: block，同时可以用margin调整间距和对齐，保持和原布局一致的水平居中：

.item2 button {
  display: block;
  margin: 10px auto;
  /* 可额外添加padding、width等样式优化按钮外观 */
}

方法2：用Flex布局实现纵向排列 #

给容器.item2设置Flex布局，并指定纵向排列方向，同时控制对齐和间距：

.item2 {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 按钮之间的空隙 */
  align-items: center; /* 让按钮水平居中 */
}

方法3：用Grid布局实现单列排列 #

给.item2设置Grid布局，默认就是单列，再调整对齐和间距：

.item2 {
  display: grid;
  gap: 10px;
  justify-items: center; /* 按钮水平居中 */
}

关于Stack Exchange问题代码占比过高的调整建议 #

你可以在问题里补充这些内容来优化：

• 明确说明你要实现的具体效果：左侧菜单区域（.item2）内的按钮纵向堆叠排列
• 描述你尝试过的操作细节：比如你给按钮添加过display:block但没生效，给容器.item2加block也没改变按钮排列
• 说明当前的异常现象：按钮始终横向成行显示

这样既让问题逻辑更完整，也能降低代码在问题中的占比，符合平台的提问规范。

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