我今天才开始学习 CSS 网格,我可以开始明白使用这个很棒的 css 类的意义了。但真正让我感到困惑的一件事是如何在移动设备上重新组织网格。
我在这里做了一个例子。这就是它在桌面 View 上的工作方式。当屏幕尺寸低于 991px 时。我希望网格看起来像这样:
但是我应该如何使用 CSS 网格来控制它呢?
.wrapper {
display:grid;
grid-template-columns:1fr 2fr 1fr;
grid-auto-rows:minmax(100px,auto);
grid-gap:1em;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.box1 {
grid-column:1/3;
grid-row:1/3;
}
.box2 {
grid-column:3;
}
.box3 {
grid-column:3;
}
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
最佳答案
你应该使用@media
,你需要再次调整991px。
.wrapper {
display:grid;
grid-template-columns:1fr 2fr 1fr;
grid-auto-rows:minmax(100px,auto);
grid-gap:1em;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.box1 {
grid-column:1/3;
grid-row:1/3;
}
.box2 {
grid-column:3;
}
.box3 {
grid-column:3;
}
@media screen and (max-width:991px){
.wrapper {
grid-template-columns:1fr 1fr;
}
.box1 {
grid-column:1/4;
grid-row:1/3;
}
.box2 {
grid-column:1/2;
}
.box3 {
grid-column:2/4;
}
}
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
关于html - CSS 网格和响应式 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54813393/