两列网格应换成一列网格 [英] Two-Column grid should wrap into One-Column grid
问题描述
在我的CSS网格中,左列中有一个大项目,右列中有三个小项目:
In my css grid I have one large item in the left column and three smaller items in the right column:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(3, 50px);
grid-auto-flow: column;
}
.item-1 {
background-color: black;
grid-column: span 1;
grid-row: span 3;
}
.item-2,
.item-3,
.item-4 {
grid-column: span 1;
grid-row: span 1;
}
.item-2 {
background-color: deeppink;
}
.item-3 {
background-color: yellow;
}
.item-4 {
background-color: blue;
}
<div class="container">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
</div>
现在在较小的屏幕上,右边的三个项目消失了,只有黑色的可见。这是因为我在 grid-template-rows中精确声明了3行:repeat(3,200px);
,对吗?
Now on smaller screens the three items on the right just disappear and only the black one is visible. This is because I have declared exactly 3 rows in grid-template-rows: repeat(3, 200px);
, correct?
但是我想要的是所有4个项目都互相包裹(例如,网格应具有1列和6行):
What I want however is that all 4 items wrap under each other (e.g. the grid should have 1 column and 6 rows):
我知道可以使用媒体查询来达到此目的,但是我想尽可能避免出现这种情况。
I know that this could be reached using media queries, but I wanted to avoid those in this scenario if possible.
我尝试了 grid-template-rows:repeat(auto-fit,200px)
,但这没有提供理想的结果。
I have tried grid-template-rows: repeat(auto-fit, 200px)
but this didn't provide the desired result.
感谢您的帮助!
推荐答案
您可以尝试
.container {
display: grid;
grid-template-areas: 'a a';
grid-template-columns: 50% 50%;
grid-template-rows: repeat(3, 50px);
grid-auto-flow: column;
}
3条黑线-3条彩色线
3 Black Lines - 3 color lines
@media only screen and (max-width: 600px) {
.container {
grid-template-areas: 'a';
grid-template-columns: 100%;
grid-template-rows: repeat(6, 50px);
}
}
1条黑线和3条彩色线
1 Black line and 3 Color lines
@media only screen and (max-width: 600px) {
.container {
grid-template-areas: 'a';
grid-template-columns: 100%;
grid-template-rows: repeat(4, 50px);
}
.item-1 {
grid-row: span 1;
}
}
您可以根据需要设置媒体查询的宽度想要。
You can set the width for the media query as you want.
这篇关于两列网格应换成一列网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!