如何在HTML中设置多个按钮间距并实现网格布局？

你可以通过调整HTML结构+添加CSS样式的方式实现需求：

1. 调整HTML结构 #

先把所有社交按钮包裹在一个容器元素中，方便统一控制布局：

<div class="social-buttons">
  <a href="https://github.com/drippy-cat" class="button primary">GitHub</a>
  <a href="https://discord.gg/xvTyBgn6F2" class="button primary">Discord</a>
  <a href="https://app.daily.dev/drippy-cat" class="button primary">daily.dev</a>
</div>

2. 添加CSS样式 #

给容器添加网格布局样式，同时设置按钮间距：

.social-buttons {
  display: grid;
  /* 设置按钮之间的水平/垂直间距，数值可按需修改 */
  gap: 1.5rem;
  /* 响应式自适应列：按钮最小宽度120px，自动适配屏幕宽度调整列数 */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  /* 若需要固定列数，比如3列，替换成下面这行 */
  /* grid-template-columns: repeat(3, 1fr); */
}

关键属性说明 #

• display: grid：将容器声明为网格布局容器
• gap：直接定义网格项（按钮）之间的间距，无需给单个按钮加margin，更易维护
• repeat(auto-fit, minmax(120px, 1fr))：实现响应式效果，屏幕宽度足够时自动增加列数，保证按钮不会过窄；如果需要固定列数，把auto-fit换成具体列数即可（比如repeat(2, 1fr)就是固定2列）

如果你的按钮原本有margin样式，建议移除或调整，避免和gap的间距叠加导致间距过大。

内容的提问来源于stack exchange，提问作者drippy-cat