Grid布局下inline-block无法根据内容自适应宽度问题咨询

嘿，我太懂你这个困扰了！当用Grid布局时，子元素（也就是网格项）的默认行为就是拉伸填满所在的网格轨道，哪怕你设置了inline-block也没用——因为Grid布局会直接覆盖子元素的display属性，把它们变成网格项，而网格项默认的justify-self和align-self值都是stretch，这就导致元素被强制拉满列宽了。

快速解决方案 #

给你的网格子项加上justify-self: start（控制水平方向不拉伸，自适应内容宽度），如果连高度也想自适应内容，再加上align-self: start就行。修改后的CSS代码如下：

.BotWrapper {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  grid-auto-rows: minmax(20px, auto);
  margin-top: 0.8em;
  word-wrap: break-word;
}

.BotWrapper > div {
  margin-left: 2%;
  background: /* 这里补上你的背景色 */;
  justify-self: start; /* 核心：让元素宽度自适应内容，不填满列宽 */
  align-self: start; /* 可选：让元素高度自适应内容，不拉伸行高 */
}

原理说明 #

• justify-self: start：控制网格项在水平方向上的对齐方式，设置为start后，元素会紧贴网格区域的起始边缘，宽度自动收缩到内容的实际宽度。
• align-self: start：控制垂直方向的对齐逻辑，同理，让元素高度自适应内容，不会被强制拉伸到行的最大高度。

另一种可选方案（如果不需要固定列宽比例） #

如果你不需要两列平分容器宽度，而是希望列宽跟着内容走，可以把grid-template-columns改成repeat(2, auto)或者repeat(2, fit-content(xxx))，比如：

.BotWrapper {
  /* 其他属性不变 */
  grid-template-columns: repeat(2, auto); /* 列宽自适应内容 */
}

不过这种方案下，两列的宽度会根据各自内容变化，不一定平分容器，适合不需要固定列宽比例的场景。

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