如何使用Grid CSS实现侧边栏按钮底部对齐并居中

要实现侧边栏底部居中的按钮布局，只需调整现有代码的Grid配置和容器对齐方式，同时修复语法错误，具体如下：

完整代码 #

html, body {
  height: 100%;
  width: 100%;
  margin: 0; /* 移除默认边距，避免不必要的滚动条 */
}

.main {
  background: black;
  height: 100%;
  width: 100%;
  display: flex; /* 方便后续主内容与侧边栏横向排列 */
}

nav {
  width: 40px;
  border-right: 1px solid white;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto; /* 核心：顶部区域占满剩余空间，底部区域自适应高度贴底 */
  justify-items: center; /* 让内部元素水平居中 */
  padding-top: 8px; /* 顶部预留间距，可选 */
}

.bot {
  display: flex;
  flex-direction: column; /* 按钮垂直排列 */
  align-items: center; /* 按钮水平居中 */
  padding-bottom: 8px; /* 底部预留间距，避免按钮贴边 */
}

.circle-btn {
  width: 32px;
  height: 32px;
  background: white;
  margin-bottom: 4px;
  border-radius: 32px; /* 修复语法错误，添加必要的冒号 */
}

<div class="main">
  <nav>
    <div class="top">
      <!-- 顶部内容区域，可后续添加元素 -->
    </div>
    <div class="bot">
      <div class="circle-btn"></div>
      <div class="circle-btn"></div>
      <div class="circle-btn"></div>
    </div>
  </nav>  
  <!-- 主内容区域可在此处添加 -->
</div>

关键调整说明 #

1. 侧边栏Grid布局：给nav设置grid-template-rows: 1fr auto;，其中1fr让.top区域占据侧边栏所有剩余高度，auto让.bot区域根据按钮高度自适应，自动吸附到侧边栏底部。
2. 按钮容器对齐：.bot使用Flex布局，flex-direction: column保证按钮垂直排列，align-items: center让按钮在侧边栏内水平居中，配合padding-bottom避免按钮贴紧底部边缘。
3. 细节修复：修正border-radius的语法错误，给html, body添加margin: 0移除默认边距，避免页面出现滚动条。
4. 扩展性优化：给.main添加display: flex，方便后续添加主内容区域时与侧边栏横向排列。

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