在儿童使用网格列时水平滚动的Grid CSS容器？

时间：2019-03-15 04:58:43

标签： html css css3 css-grid

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

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

enter image description here

问题：

在使用.elements时，我很难让孩子.grid超过父母grid-column: span 4;。

注意：

  • 孩子们将在手机上达到顶峰
  • 如果孩子溢出，网格将具有滚动条
  • 孩子们完全遵循网格。

问题： 当使用grid-column将CSS网格项的子项与网格对齐时，是否可以通过滚动条使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;
}

1 个答案:

答案 0 :(得分：0)

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

您可能需要定义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);，您将在顶部网格中看到以下内容：

enter image description here

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

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

1 定义模板列时的问题是，您将告诉浏览器您将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>

请注意前两张图片的宽度与后两张图片有何不同。前几张图片在您定义的网格内，另一张图片在浏览器创建的网格内。

仅通过设置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>

相关问题
最新问题