我正在探索 CSS Grid,看看它是否可以完全取代我的特定用例的响应式 CSS 媒体查询的需求。我有以下网格容器:
.gridContainer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
padding: 0px 15px;
margin: 0 auto;
grid-row-gap: 20px;
}
网格容器包含三个项目,这些项目最初在较大的屏幕尺寸上产生一行和三列:
当我减少视口宽度,使三列低于 250px 时,我希望网格布局捕捉到三行和一列的布局:
当您减小视口宽度时,由于选择了自动放置算法,因此当前有一个临时布局,其中第三个项目包装到它自己所在的行上:
我想绕过这个包装,只支持初始的一行,三列布局和最后的三行,一列布局。
您可以使用 mediaquerie,并在达到最小宽度后将容器变成网格:(由于您提供的信息很少,因此选择了代码选项)
这个想法的基础例子
div {
padding: 1em;
margin: 1em;
border: dotted tomato;
}
@media (min-width: 780px) {
body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
padding: 0px 15px;
margin: 0 auto;
grid-row-gap: 20px;
}
}
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
您可以在整页模式下播放代码段,并调整浏览器的大小以检查行为。
自动调整或自动填充功能用最大列数填充可用空间。
您可以在媒体表达式的帮助下解决问题,以所需的分辨率更改列数。
后果
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(250px, 1fr));
padding: 0px 15px;
margin: 0 auto;
grid-row-gap: 20px;
list-style: none;
}
.item {
border: 1px dashed red;
}
@media (max-width: 800px) {
.grid {
grid-template-columns: 1fr;
}
}
<ul class="grid">
<li class="item">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adiicing elit. Iusto nihil neque quas corrupti eaque in iure totam reiciendis praesentium. Sapiente impedit magni consequatur modi error eaque vel tempore consequuntur saepe.</p>
</li>
<li class="item">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adiicing elit. Iusto nihil neque quas corrupti eaque in iure totam reiciendis praesentium. Sapiente impedit magni consequatur modi error eaque vel tempore consequuntur saepe.</p>
</li>
<li class="item">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adiicing elit. Iusto nihil neque quas corrupti eaque in iure totam reiciendis praesentium. Sapiente impedit magni consequatur modi error eaque vel tempore consequuntur saepe.</p>
</li>
</ul>
和CodePen上的相同代码
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(55条)