代码之家 › 专栏 › 技术社区 › Armeen Moon

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

grid css

Armeen Moon · 技术社区 · 6 年前

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

我试图在gridcss中实现这个布局:

问题:

我很难让孩子们 .elements 使他们的父母满溢 .grid 使用时 grid-column: span 4; .

注:

孩子们将在移动电话上达到高峰
如果子项溢出,网格将有滚动条
孩子们完全按照网格走。

问题: 当css网格项的子项与网格对齐时,是否可以使用滚动条使其溢出 grid-column ?如果是,我缺少什么属性?如果没有,那么在使用css网格时,是否有办法实现上述布局?

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;
}

0 回复 | 直到 6 年前

Temani Afif 6 年前

你只需要摆脱 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 .

基本上每个元素都有 min-width 等于 4*40px + 3*48px 在这种情况下。如果你移除 1FR 使用 grid-auto-columns: 40px; 然后 最小宽度 只会是 width .

^一定义模板列时的问题是,您将告诉浏览器 12 带柱 1FR 稍后,如果有3个以上的项,您将使用更多的项,因此隐式网格将包含超过 十二 列和浏览器的宽度计算可能与您设置的不同。

下面是一个简单的例子来说明:

.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 {
  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?图像=0’& gt;
<img src=“https://picsum.photos/200/200?图像=0’& gt;
<img src=“https://picsum.photos/200/200?图像=0’& gt;
<img src=“https://picsum.photos/200/200?图像=0’& gt;
&L/DIV & GT;