我今天刚开始学习CSS网格,我能看到使用这些很棒的CSS类的好处。但有一件事情真的让我感到困惑,那就是如何在移动设备上重新组织网格。
下面是我的一个示例。在桌面视图上,它可以正常工作。当屏幕尺寸小于991像素时,我希望网格看起来像这样:
下面是我的一个示例。在桌面视图上,它可以正常工作。当屏幕尺寸小于991像素时,我希望网格看起来像这样:
但是我应该如何使用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>