CSS Grid布局如何缩短两列文本间距 不使用负margin实现

问题原因 #

你现在用的grid-template-columns: repeat(2, 1fr)是强制两列等宽的规则，每列会平分Grid容器的可用宽度，就算列内内容很短，列本身的宽度也会保持等分后的尺寸，所以两列内容之间的实际距离是「第一列内容右侧的留白 + 你设置的18px gap + 第二列内容左侧的留白」，自然会显得间距远大于你设置的gap值。

可行解决方案（仅使用Grid相关属性，无需负margin） #

• 方案1：修改列宽规则为内容自适应
  把原有grid-template-columns: repeat(2, 1fr)替换为：

grid-template-columns: repeat(2, auto);

这个规则会让每列的宽度自动收缩到刚好容纳列内内容的大小，两列内容之间只会保留你设置的18px gap，不会有多余的列内空白撑大间距。如果需要限制单列最大宽度避免内容过长溢出，可以改成带最大宽度限制的写法，数值可按需调整：

/* 单列宽度自适应，最多不超过200px */
grid-template-columns: repeat(2, minmax(auto, 200px));

• 方案2：保留两列等宽规则仅调整内容对齐
  如果你需要保持两列等宽的布局，只是想缩短内容间距，可以给Grid的子项设置justify-self: start，让列内内容靠列的左侧对齐，不过这种方案不会改变列本身的宽度，仅能消除第二列内容左侧的留白，间距缩短的幅度有限。

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