如何实现CSS网格自适应换行并适配多屏幕？

问题概述 #

需要实现以下效果：

• 小窗口尺寸下网格自动换行，适配移动端提升可访问性
• 大窗口下按钮自动均匀分布，填满整个容器宽度
• 允许按钮尺寸不一致，仍能保持均匀间距

之前使用auto-fill/auto-fit时，虽能实现换行，但大屏无法填满容器，且按钮尺寸不同时会出现间距不均的问题；当前固定列数的网格写法无法适配小屏换行。

优化后的代码 #

CSS代码 #

.bttns {
  display: grid;
  /* 核心配置：自动适配列数，最小宽度120px（可调整），剩余空间均匀分配 */
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  /* 统一网格项间距，替代单个按钮的margin-right */
  gap: 20px;
  padding: 0 10px; /* 左右内边距避免按钮贴容器边缘 */
  border-bottom: 7px solid #4A3E94;
  background-color: #d19dfc;
  font-family: 'Lucida Console', monospace;
}

/* 统一所有按钮容器样式，消除冗余代码 */
.btn-item {
  font-size: 30px;
  text-align: center;
}

.btn-item a:link,
.btn-item a:visited {
  background-color: #4A3E94;
  color: white;
  padding: 3px 10px;
  text-decoration: none;
  display: inline-block;
  margin: 10px 0;
  border: 2px solid #4A3E94;
  border-radius: 7px;
}

HTML代码 #

<div class="bttns">
  <div class="btn-item">
    <a href="Imagess/pholdr.png" target="_blank">Art</a>
  </div>
  <div class="btn-item">
    <a href="Imagess/pholdr.png" target="_blank">Blog</a>
  </div>
  <div class="btn-item">
    <a href="/About/abt.html" target="_self">About</a>
  </div>
  <div class="btn-item">
    <a href="Imagess/steviekitty.png" target="_blank">Music</a>
  </div>
  <div class="btn-item">
    <a href="Imagess/kittr.png" target="_blank">WIP</a>
  </div>
</div>

关键实现说明 #

1. 核心网格列配置：repeat(auto-fit, minmax(min(120px, 100%), 1fr))
   • auto-fit：自动根据容器宽度调整列数，多余列会自动折叠
   • minmax(min(120px, 100%), 1fr)：设置每列最小宽度为120px（容器宽度不足时自动占满100%），剩余空间按比例分配，确保大屏下均匀填满容器
2. 用gap替代margin：统一设置网格项间距，避免单个按钮设置margin-right导致最后一项多余间距，同时保证不同尺寸按钮间距均匀
3. 统一按钮样式：将重复的b1-b5样式合并为.btn-item，减少代码冗余，便于后续维护

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