logo标签列表

使用CSS网格实现水平滚动

htmlcssreactjscss-gridnext.js
18

当我尝试在网格完整显示四列时，我想实现水平滚动，但遇到了问题。请参见

#series {
    display: grid;
    grid-gap: 16px;
    overflow-x: scroll;
    padding: 16px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: column;
}

使用这个方法，我得到了以下输出

在此输入图片描述

但是，你知道的，我想要得到与“四列”相同的结果，并带有滚动条以便查看更多。

问题出在哪里呢？

每列的width必须是动态的，或者与上面的图像相同？ - kukkuz
不，我已经尝试使用 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 但是所有无法在屏幕中显示的其他项目都没有出现。 - Diego Cardona
1
你能否发布一个 jsfiddle 或 codepen 链接？我认为你应该在网格的父元素上设置 overflow-x: scroll，而不是在网格上。 - arieljuod
我猜测检测网格的宽度直到某些但不是所有的网格项可能是不可能的；弹性盒也是如此。 - kukkuz
这是我的代码 https://codesandbox.io/s/m77m8ory9j 但我不知道为什么它不工作。 - Diego Cardona
因为您的最小网格项大小为160px，如果您可以保持该大小不变，您可以在网格框的包装元素上使用overflow（其宽度大约为4×160px）和grid-auto-flow: column，如所述问题。 - kukkuz
6个回答
50

试试用这个：

display: grid;
grid-gap: 16px;
padding: 16px;
grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
grid-auto-flow: column;
grid-auto-columns: minmax(160px,1fr);
overflow-x: auto;

grid-auto-flow: column; 会强制网格按列添加元素，而不是遵循自由空间。

grid-auto-columns: minmax(160px,1fr); 添加到视口外的项目不匹配auto-fit，因此它们不会获得模板中定义的大小。因此，您必须使用grid-auto-columns重新定义它们。

overflow-x: auto; auto会添加滚动条。

当我尝试在一个具有position:sticky的header中放置一个div时，整个页面都会滚动。 - eddy
@eddy 如果没有更多细节，我不确定这是否适用于您的问题。但是请查看以下链接，了解有关position: sticky和grid组合的一些提示 https://melanie-richards.com/blog/css-grid-sticky/?ref=heydesigner - Th3S4mur41
太棒了！不再需要使用JS滑块插件了！ - Anh Tran
4

水平滚动容器的正确实现方式！来源

:root {
  --gutter: 20px;
}

.app {
  padding: var(--gutter) 0;
  display: grid;
  grid-gap: var(--gutter) 0;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-content: start;
}

.app > * {
  grid-column: 2 / -2;
}

.app > .full {
  grid-column: 1 / -1;
}

.hs {
  display: grid;
  grid-gap: calc(var(--gutter) / 2);
  grid-template-columns: 10px repeat(6, calc(50% - var(--gutter) * 2)) 10px;
  grid-template-rows: minmax(150px, 1fr);
  
  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: calc(.75 * var(--gutter));
  margin-bottom: calc(-.5 * var(--gutter));
}

.hs:before,
.hs:after {
  content: '';
}

/* Hide scrollbar */
.hide-scroll {
  overflow-y: hidden;
  margin-bottom: calc(-.1 * var(--gutter));
}


/* Demo styles */

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  background: #456173;
}

ul {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3 {
  margin: 0;
}

.app {
  width: 375px;
  height: 667px;
  background: #DBD0BC;
  overflow-y: scroll;
}

.hs > li,
.item {
  scroll-snap-align: center;
  padding: calc(var(--gutter) / 2 * 1.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 8px;
}
<div class="app">
  <h1>Some headline</h1>

  <div class="full hide-scroll">

    <ul class="hs">
      <li class="item">test</li>
      <li class="item">test</li>
      <li class="item">test</li>
      <li class="item">test</li>
      <li class="item">test</li>
      <li class="item">test</li>
    </ul>

  </div>

  <div class="container">
    <div class="item">
      <h3>Block for context</h3>
    </div>
  </div>
</div>

1
很抱歉，我不喜欢这种方法，因为需要使用JavaScript来设置网格项的数量。只需设置grid-auto-flow: column;和grid-auto-columns与grid-template-columns相同的值即可！ - Alexandre Piva
3

试试这个：

.container{
   display: grid;
   grid-auto-columns: max-content;
   grid-template-rows: 1fr;
   width: 100%;
   overflow-x: auto;
 }
.child{
   grid-row: 1;
   grid-column: auto;
  }
这个解决方案适用于我想要实现的内容：一个可滚动的单行列。 - mrchestnut
2

最近我遇到了类似的问题，但是没有一个答案能够以我需要的方式解决这个问题。

以下是我的看法：

body {
    background-color: #e2e2e2;
}

h1,
h2 {
    text-align: center;
}

.cards {
    /* How many columns to show. */
    --visible-cols: 4;

    /* Gap between columns. */
    --col-gap: 20px;

    /* How much to show of the next hidden column. You can use this as a hint to show the user that there are more scrollable items. Particularly helpful for mobile devices where the scrollbar gets hidden by default.*/
    --col-hint: 0px;

    /* Whitespace between the elements and the scrollbar. */
    --scrollbar-padding: 20px;

    /*  Calculated column size. */
    --col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint));
    
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: var(--col-size);
    grid-auto-columns: var(--col-size);
    overflow-x: auto;
    overflow-y: hidden;
    grid-gap: var(--col-gap);
    padding-bottom: var(--scrollbar-padding);
    margin: 30px 0;
}

.cols-5,
.desktop-cols-5 {
    --visible-cols: 5;
}

.cols-3 {
    --visible-cols: 3;
}

.hint-next {
    --col-hint: 20px
}

@media (max-width: 1024px) {
    .laptop-cols-3 {
        --visible-cols: 3;
    }
}

@media (max-width: 767px) {
    .tablet-cols-2 {
        --visible-cols: 2;
    }
    .tablet-hint-next {
        --col-hint: 15px
    }
}

@media (max-width: 425px) {
    .mobile-cols-1 {
        --visible-cols: 1;
    }
    .mobile-hint-next {
        --col-hint: 10px
    }
}

.card {
    display: flex;
    flex-flow: column nowrap;
    background-color: lightblue;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    min-height: 250px;
    overflow: hidden;
}

.card-title,
.card-desc {
    flex: 1;
    border-radius: 10px;
}

.card-title {
    font-size: 1.2em;
    font-weight: bold;
}

.card-desc {
    padding: 20px;
    background-color: orange;
}
<div class="main">
   <h1>CSS Grid - Scrollable Horizontal Layout Example</h1>
   <h2>4 Columns</h2>
   <div class="cards">
      <div class="card">
         <div class="card-title">Card 1</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 2</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 3</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 4</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 5</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 6</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 7</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 8</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 9</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 10</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
   </div>
   <h2>3 Columns - Hint Next</h2>
   <div class="cards cols-3 hint-next">
      <div class="card">
         <div class="card-title">Card 1</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 2</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 3</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 4</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 5</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 6</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 7</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 8</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 9</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 10</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
   </div>
   <h1>Responsive Example</h1>
   <h2>Desktop - 5 Columns</h2>
   <h2>Laptop - 3 Columns</h2>
   <h2>Tablet - 2 Columns - Hint Next</h2>
   <h2>Mobile - 1 Column - Hint Next</h2>
   <div class="cards desktop-cols-5 laptop-cols-3 tablet-cols-2 tablet-hint-next mobile-cols-1 mobile-hint-next">
      <div class="card">
         <div class="card-title">Card 1</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 2</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 3</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 4</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 5</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 6</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 7</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 8</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 9</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
      <div class="card">
         <div class="card-title">Card 10</div>
         <div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
   </div>
</div>

重要的部分是：
.cards {
    /* How many columns to show. */
    --visible-cols: 4;

    /* Gap between columns. */
    --col-gap: 20px;

    /* How much to show of the next hidden column. You can use this as a hint to show the user there are more scrollable items. Particularly helpful for mobile devices where the scrollbar gets hidden by default.*/
    --col-hint: 0px;

    /* Whitespace between the slider and the scrollbar. */
    --scroller-padding: 20px;

    /*  Calculated column size. */
    --col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint));

    display: grid;
    grid-auto-flow: column;
    grid-template-columns: var(--col-size);
    grid-auto-columns: var(--col-size);
    overflow-x: auto;
    overflow-y: hidden;
    grid-gap: var(--col-gap);
    padding-bottom: var(--scroller-padding);
}

通过调整每个屏幕大小的相关CSS属性，可以很容易地使其响应式。我也提供了一个响应式示例。

您还可以在此处检查代码笔：https://codepen.io/amyriounis/pen/VwyydGj

1

您的问题是使用了1fr单位。相反，应该使用25%（使用calc来适应任何间隙）。这将使您的列相对于可用屏幕宽度进行调整。当然，您还必须在grid-auto-columns中应用25％。

0
老兄，我已经尝试了 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 但是我没有得到滚动条，就像其他项目不存在一样。 - Diego Cardona
尝试在父元素上使用overflow:scroll!important。 - ISS
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接