响应式水平滚动CSS网格，每个断点具有固定数量的网格项目 [英] Responsive horizontal scrolling CSS Grid with fixed number of grid-items per breakpoint

查看：72
本文介绍了响应式水平滚动CSS网格，每个断点具有固定数量的网格项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问题：



问题：
网格项在响应断点上未按预期缩放。



请检出视频 ，了解我如何按断点缩放网格项目： https：// imgur.com/070Zwve



背景



我问了一个关于如何使用CSS网格使网格项目水平流动的先前问题：





最后我得到了适用于台式机但不适用于任何其他断点的代码：



CSS：

  .section {
 width：100％; 
显示：块； 
背景：红色； 
 box-sizing：边框框； 
 padding：40px 24px; 
 
 @媒体屏幕，（最小宽度：600像素）和（最大宽度：1139像素）{
背景：橙色； 
 padding：56px 48px; 
} 
 
 @media屏幕，（最小宽度：1140px）{
填充：64px 48px； 
背景：绿色； 
} 
} 
 
 .container {
 margin：0 auto; 
背景：rgba（244,244,244，.25）; 
最大宽度：599px； 
 
 
 @media屏幕，（最小宽度：600px）和（最大宽度：1139px）{
最大宽度：1039px； 
背景：rgba（244,244,244，.25）; 
} 
 
 @media屏幕，（最小宽度：1140px）{
最大宽度：1032px; 
背景：rgba（244,244,244，.25）; 
} 
} 
 
 .samba-grid {
 display：grid; 
背景：继承； 
宽度：100％； 
overflow-x：自动; 
溢出-y：隐藏; 
 
 grid-auto-columns：minmax（55px，1fr）; 
 grid-gap：24px; 
 
 @media屏幕和（最小宽度：600px）和（最大宽度：1139px）{
 grid-auto-columns：minmax（44px，1fr）; 
 grid-gap：48px; 
} 
 
 @媒体屏幕和（最小宽度：1140px）{
 grid-auto-columns：minmax（42px，1fr）; 
 grid-gap：48px; 
} 
} 
 
 
 .element {
 display：grid; 
背景：rgba（0,0,0，.3）; 
网格列：跨度3； 
 grid-row-start：2; //删除此
 
 @media屏幕，然后（最小宽度：600px）和（最大宽度：1139px）{
 grid-column：span 3; 
} 
 
 @媒体屏幕和（最小宽度：1140px）{
网格列：范围4； 
} 
} 
 .element img {
 width：100％; 
}

HTML：

 < section class = section> 
< div class = container> 
< div class = samba-grid> 
< div class = element> 
< img src = https://placebear.com/400/500 alt => 
< div class = copy> 
洛雷姆（Lorem），伊普森（ipsum）多洛（Dosum）坐着，自私自利。圣人，甚至是商品？ 
< / div> 
< / div> 
< div class = element> 
< img src = https://placebear.com/400/500 alt => 
< div class = copy> 
洛雷姆（Lorem），伊普森（ipsum）多洛（Dosum）坐着，自私自利。圣人，甚至是商品？ 
< / div> 
< / div> 
< div class = element> 
< img src = https://placebear.com/400/500 alt => 
< div class = copy> 
洛雷姆（Lorem），伊普森（ipsum）多洛（Dosum）坐着，自私自利。圣人，甚至是商品？ 
< / div> 
< / div> 
< div class = element> 
< img src = https://placebear.com/400/500 alt => 
< div class = copy> 
洛雷姆（Lorem），伊普森（ipsum）多洛（Dosum）坐着，自私自利。圣人，甚至是商品？ 
< / div> 
< / div> 
< div class = element> 
< img src = https://placebear.com/400/500 alt => 
< div class = copy> 
洛雷姆（Lorem），伊普森（ipsum）多洛（Dosum）坐着，自私自利。圣人，甚至是商品？ 
< / div> 
< / div> 
< div class = element> 
< img src = https://placebear.com/400/500 alt => 
< div class = copy> 
洛雷姆（Lorem），伊普森（ipsum）多洛（Dosum）坐着，自学成才。圣人，甚至是商品？ 
< / div> 
< / div> 
< div class = element> 
< img src = https://placebear.com/400/500 alt => 
< div class = copy> 
洛雷姆（Lorem），伊普森（ipsum）多洛（Dosum）坐着，自私自利。圣人，甚至是商品？ 
< / div> 
< / div> 
< div class = element> 
< img src = https://placebear.com/400/500 alt => 
< div class = copy> 
洛雷姆（Lorem），伊普森（ipsum）多洛（Dosum）坐着，自学成才。圣人，甚至是商品？ 
< / div> 
< / div> 
 
< / div> 
 
 
< / div> 
< / section>

^请注意，该视频显示了网格项在行中的堆叠不会水平滚动。 / em>

解决方案

您可以定义 grid-auto-columns 为了控制这个百分比。公式应为（100％-（N-1）* Gap）/ N 其中 N 是元素数您想显示：


这是一个带有3个断点的简化示例：


  .grid {
 display：grid; 
 grid-auto-flow：列; 
 grid-auto-columns：calc（（100％-2 * 10px）/ 3）; / * 3个可见项目* / 
 grid-gap：10px; 
保证金：10px； 
 max-width：800px; 
溢出：自动; 
} 
 img {
 max-width：100％; 
} 
 
 @ media all和（max-width：800px）{
 .grid {
 grid-auto-columns：calc（（100％-5px） / 2）; / *两个项目可见* / 
 grid-gap：5px; 
} 
} 
 
 @media all和（max-width：400px）{
 .grid {
 grid-auto-columns：100％; / *可见一个项目* / 
 grid-gap：5px; 
} 
}  

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


可以使用CSS优化的代码变量：


  .grid {
 --n：3; / * 3个可见项目* / 
 --g：10px; 
 
 display：grid; 
 grid-auto-flow：列; 
 grid-auto-columns：calc（（100％-（var（-n）-1）* var（-g））/ var（-n））; 
 grid-gap：var（-g）; 
保证金：10px； 
 max-width：800px; 
溢出：自动; 
} 
 img {
 max-width：100％; 
} 
 
 @ media all和（max-width：800px）{
 .grid {
 --n：2; / * 2个可见项目* / 
 --g：5px; 
} 
} 
 
 @media all和（max-width：400px）{
 .grid {
 --n：1; / * 1可见项* / 
} 
}  

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


Question: CODEPEN

How can I design a grid using CSS Grid to make a Carousel that's grid items are responsive to a fixed number of grid columns which will vary per breakpoint?

PROBLEM: The grid-items don't scale as expected on responsive breakpoints. The grid-items peak out not to spec.

Please checkout a video of how I want grid-items to scale per breakpoint: https://imgur.com/070Zwve

Background

I asked a previous question about how I can make grid-items flow horizontally using css grid:

Grid CSS container that scrolls horizontally when children use grid-column?

In the end I got code that worked for desktop but not for any other breakpoints:

CSS:

.section {
  width: 100%;
  display: block;
  background: red;
  box-sizing: border-box;
  padding: 40px 24px;

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    background: orange;
    padding: 56px 48px;
  }

  @media screen and (min-width: 1140px) {
    padding: 64px 48px;
    background: green;
  }
}

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


  @media screen and (min-width: 600px) and (max-width: 1139px) {
    max-width: 1039px;
    background: rgba(244,244,244, .25);
  }

  @media screen and (min-width: 1140px) {
    max-width: 1032px;
    background: rgba(244,244,244, .25);
  }
}

.samba-grid {
  display: grid;
  background: inherit;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  grid-auto-columns: minmax(55px, 1fr);
  grid-gap: 24px;

  @media screen and (min-width: 600px) and (max-width: 1139px)  {
    grid-auto-columns: minmax(44px, 1fr);
    grid-gap: 48px;
  }

  @media screen and (min-width: 1140px) {
    grid-auto-columns: minmax(42px, 1fr);
    grid-gap: 48px;
  }
}


.element {
  display: grid;
  background: rgba(0,0,0,.3);
  grid-column: span 3;
  grid-row-start: 2; // REMOVE THIS

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    grid-column: span 3;
  }

  @media screen and (min-width: 1140px) {
    grid-column: span 4;
  }
}
.element img {
  width: 100%;
}

HTML:

<section class="section">
  <div class="container">
    <div class="samba-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 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>

^ note this video shows grid-items stack in rows doesn't scroll horizontal.

解决方案

You can define the grid-auto-columns to be a percentage in order to control this. The formula should be (100% - (N-1)*Gap)/N where N is number of element you want to show:

Here is a simplified example with 3 breakpoints:

.grid {
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns:calc((100% - 2*10px)/3); /*3 items visible*/
  grid-gap:10px;
  margin:10px;
  max-width:800px;
  overflow:auto;
}
img {
  max-width:100%;
}

@media all and (max-width:800px) {
.grid {
  grid-auto-columns:calc((100% - 5px)/2); /*two items visible*/
  grid-gap:5px;
 }
}

@media all and (max-width:400px) {
.grid {
  grid-auto-columns:100%; /*one item visible*/
  grid-gap:5px;
 }
}

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

A code that you can optimize with CSS variables:

.grid {
  --n:3; /*3 visible items */
  --g:10px;
  
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns:calc((100% - (var(--n) - 1)*var(--g))/var(--n)); 
  grid-gap:var(--g);
  margin:10px;
  max-width:800px;
  overflow:auto;
}
img {
  max-width:100%;
}

@media all and (max-width:800px) {
.grid {
  --n:2; /*2 visible items */
  --g:5px;
 }
}

@media all and (max-width:400px) {
.grid {
  --n:1; /*1 visible item */
 }
}

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

这篇关于响应式水平滚动CSS网格，每个断点具有固定数量的网格项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆