如何让Grid布局容器自适应子元素宽度以适配滚动父容器？

问题核心在于：块级的Grid容器默认会继承父容器的宽度，即便子元素总宽度超过父容器，它也不会自动拉伸，导致背景随父容器宽度截断。

可以通过以下两种简单方法解决：

• 方法一：设置width: fit-content
  给Grid容器添加该属性，让容器宽度自适应所有子元素的总宽度，完美匹配横向排列的子元素之和。代码示例：

  .grid-container {
    display: grid;
    grid-auto-flow: column;
    width: fit-content;
    background: #f0f0f0;
  }
  

• 方法二：改用display: inline-grid
  将Grid容器改为行内块级元素，它的宽度会由内部子元素的总宽度决定，不再受父容器宽度限制。代码示例：

  .grid-container {
    display: inline-grid;
    grid-auto-flow: column;
    background: #f0f0f0;
  }
  

两种方法都能让Grid容器的宽度完全适配子元素总宽度，滚动根容器时背景不会再被截断。

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