我已经为我的博客网站创建了一个简单的网格系统,在那里我希望所有的框或div,除了第一个将是水平滚动在小屏幕(我的意思是780px).我怎么才能做到这一点?我试了很多方法,但都不行.
我想要的是:
这就是我现在拥有的:
这就是我在小屏幕上想要的:
以下是我的代码:
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div {
padding: 35px;
background: dodgerblue;
margin: 5px;
text-align: center;
color: #fff;
}
.parent .div:nth-child(1) {
grid-area: 1 / 1 / 3 / 3;
}
.parent .div:nth-child(2) {
grid-area: 1 / 3 / 2 / 4;
}
.parent .div:nth-child(3) {
grid-area: 2 / 3 / 3 / 4;
}
.parent .div:nth-child(4) {
grid-area: 3 / 3 / 4 / 4;
}
.parent .div:nth-child(5) {
grid-area: 3 / 2 / 4 / 3;
}
.parent .div:nth-child(6) {
grid-area: 3 / 1 / 4 / 2;
}
<div class="parent">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">5</div>
<div class="div">6</div>
</div>
请谁来帮帮我.