嘿，这个问题我之前踩过坑！Grid布局里明明内容没单元格大，却被莫名拉伸，核心原因和Grid的默认行为有关，咱们来捋清楚：

Grid容器默认的align-items和justify-items属性值都是stretch——简单说就是，单元格会自动填满它所在的网格轨道空间，不管内容实际需要多大。哪怕你一开始给单元格设了固定尺寸，只要这个默认对齐规则没改，单元格就会被强制“拉满”分配到的网格区域。另外，如果单元格里的内容是块级元素（比如<div>），它默认会占满父元素的宽度，也会间接把单元格撑大。

这里有几个实用的解决方案，你可以根据自己的场景选：

• 修改Grid容器的全局对齐规则
  直接在Grid容器上修改对齐属性，让所有单元格都根据内容尺寸来显示：

  .grid-container {
    display: grid;
    align-items: start; /* 垂直方向顶部对齐，取消拉伸 */
    justify-items: start; /* 水平方向左侧对齐，取消拉伸 */
    /* 也可以用简写：place-items: start; 同时设置两个方向 */
  }
  

• 单独设置某个单元格的对齐方式
  要是只想调整特定单元格，不影响其他单元格，给目标单元格加单独的对齐属性就行：

  .target-grid-item {
    align-self: start;
    justify-self: start;
    /* 简写：place-self: start; */
  }
  

• 限制内容的尺寸
  有时候是内容本身在“搞事情”，比如块级元素默认占满宽度。可以给单元格里的内容设置自适应尺寸，避免撑大单元格：

  .grid-item-content {
    width: fit-content; /* 内容宽度自适应自身大小 */
    max-width: 100%; /* 防止内容超出单元格边界 */
  }
  

• 固定网格轨道的尺寸
  如果你希望所有单元格尺寸严格统一，可以在定义Grid轨道时用固定单位，或者配合minmax来限制轨道不会被内容撑大：

  .grid-container {
    display: grid;
    /* 固定宽度，所有列都是200px */
    grid-template-columns: repeat(3, 200px);
    /* 或者用minmax，确保轨道最小200px，最大按比例分配 */
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
  

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