当孩子使用网格列时，水平滚动的网格CSS容器？ [英] Grid CSS container that scrolls horizontally when children use grid-column?
问题描述
红色的lignes是宽度为0的列，如您所见，每个项目仅等于3个间隙。通过设置 minmax（），我们将在没有溢出且只有很少的元素（足够用于存储空间）的情况下使用 1fr 1fr ）。当元素很多并且 1fr 变小时，您将宽度固定为 40px 。
基本上每个元素的最小宽度等于 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;边框：2px纯绿色； max-width：100％;}
< div类= 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：列； grid-auto-columns：minmax（40px，1fr）;} img {grid-column：span 2;边框：2px纯绿色； max-width：100％;}
< div类= 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>
CODEPEN: https://codepen.io/matthewharwood/pen/ywKNVg
I'm trying to achieve this layout in GridCSS:
Problems:
I'm having trouble making the children .elements overflow their parent .grid when using grid-column: span 4;.
Note:
- Children will peak on mobile
- Grid will have scroll bars if children overflow
- Children perfectly follow the grid.
Question:
Is it possible to make CSS Grid Items overflow with a scroll bar when its children are aligned to the grid using grid-column? if so, what properties am I missing? If not, is are there any work arounds to achieve these layouts shown above, when using 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;
}
You simply need to get rid of grid-template-columns: repeat(12, 1fr);1. No need to define column template since your number of element is unknown, let the browser handle this automatically by defining the implicit grid.
You may need to define grid-auto-columns to set the width of each column.
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>
Remove grid-auto-columns: minmax(40px,1fr); from above and you will see this for the top grid:
The red lignes are your columns with 0 width and as you can see each item is simply equal to 3 gaps. By setting the minmax() we will use 1fr when there isn't overflow and only few elements (enough space for 1fr). When will have a lot of elements and the 1fr will get smaller you will fix the width to 40px.
Basically each element will have a min-width equal to 4*40px + 3*48px in this case. and if you remove the 1fr and use grid-auto-columns: 40px; then the min-width will simply be the width.
1 The issue when defining the template columns is that you will told the browser that you have 12 columns with 1fr and later you will be using more if you have more than 3 items thus the implicit grid will contain more than 12 columns and the browser may calculate their width differently from what you set.
Here is as simplified example to illustrate:
.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>
Notice how the width of the first 2 images is different from the last 2. The first ones are inside the grid you defined and the other inside the one created by the browsers.
By only setting grid-auto-columns you are sure that all will have the same width:
.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>
这篇关于当孩子使用网格列时，水平滚动的网格CSS容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
