当孩子使用网格列时水平滚动的网格CSS容器？

Question

CODEPEN: https://codepen.io/matthewharwood/pen/ywKNVg

我正在尝试在 GridCSS 中实现这种布局：

问题：

在使用 grid-column: span 4; 时，我无法让子 .elements 溢出其父 .grid。

注意：

• 儿童将在移动设备上达到高峰
• 如果子元素溢出，网格将有滚动条
• 孩子们完全遵循网格。

问题： 当 CSS 网格项使用grid-column 与网格对齐时，是否可以使用滚动条使 CSS 网格项溢出？如果是这样，我缺少什么属性？如果没有，在使用 CSS Grid 时，是否有任何变通方法来实现上述布局？

HTML：

<section>
  <div class="container">
    <div class="grid">
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
     <!-- UNCOMMENT BELOW   -->
    <!--       <div class="element">
    <img src="https://placebear.com/400/500" alt="">
    <div class="copy">
       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
    </div>
  </div> -->
    </div>
  </div>
</section>

CSS：

section {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 64px 48px;
  background: green;
}

.container {
  margin: 0 auto;
  max-width: 1032px;
  background: rgba(244,244,244, .25);
}

.grid {
  display: grid;   
  grid-auto-flow: column;  
  grid-gap: 10px; 
  overflow: auto;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 48px;
}


.element {
  padding:30px 0;
  text-align: center;
  background: papayawhip;
  grid-column: span 4;
}

Answer 1

您只需删除grid-template-columns: repeat(12, 1fr);¹。由于您的元素数量未知，因此无需定义列模板，让浏览器通过定义隐式网格来自动处理。

您可能需要定义grid-auto-columns 来设置每列的宽度。

section {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 64px 48px;
  background: green;
}

.container {
  margin: 0 auto;
  max-width: 1032px;
  background: rgba(244, 244, 244, .25);
}

.grid {
  display: grid;
  grid-auto-flow: column;
  overflow: auto;
  grid-gap: 48px;
  grid-auto-columns: minmax(40px, 1fr);
}

.element {
  padding: 30px 0;
  text-align: center;
  background: papayawhip;
  grid-column: span 4;
}

img {
  max-width: 100%;
}

<section>
  <div class="container">
    <div class="grid">
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="grid">
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>

    </div>
</section>

从上方删除grid-auto-columns: minmax(40px,1fr);，您将在顶部网格中看到：

红色线是宽度为 0 的列，如您所见，每个项目仅等于 3 个间隙。通过设置minmax()，我们将在没有溢出且元素很少（1fr 有足够空间）时使用1fr。什么时候会有很多元素并且1fr 会变小，您将宽度固定为40px。

在这种情况下，基本上每个元素都有一个等于4*40px + 3*48px 的min-width。如果您删除1fr 并使用grid-auto-columns: 40px;，那么min-width 将只是width。

---

¹ 定义模板列时的问题是，您会告诉浏览器您有 12 列和 1fr ，以后如果您有超过 3 个项目，您将使用更多因此隐式网格将包含超过12 列，并且浏览器计算它们的宽度可能与您设置的不同。

这里是一个简化的例子来说明：

.grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-flow: column;
}
img {
  grid-column:span 2;
  border:2px solid green;
  max-width:100%;
}

<div class="grid">
 <img src="https://picsum.photos/200/200?image=0">
 <img src="https://picsum.photos/200/200?image=0">
 <img src="https://picsum.photos/200/200?image=0">
 <img src="https://picsum.photos/200/200?image=0">
</div>

注意前 2 个图像的宽度与后 2 个图像的宽度有何不同。第一个在您定义的网格内，另一个在由浏览器创建的网格内。

通过仅设置grid-auto-columns，您可以确定所有的宽度都相同：

.grid {
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns:minmax(40px,1fr);
}
img {
  grid-column:span 2;
  border:2px solid green;
  max-width:100%;
}

<div class="grid">
 <img src="https://picsum.photos/200/200?image=0">
 <img src="https://picsum.photos/200/200?image=0">
 <img src="https://picsum.photos/200/200?image=0">
 <img src="https://picsum.photos/200/200?image=0">
</div>