从 2 个网格行到2个网格彼此下方(响应能力)

Question

简单的代码花了我+9个小时才制作出来，可悲的现实。我尝试了很多教程和页面，但即使它们也无法帮助我。我复制/修改了我遇到的多行代码，但没有一行做任何事情。这只是一个学习页面，我正在尝试将网格响应能力纳入各种设备。

我在下面附上了屏幕，说明它是如何的，以及我想要它的样子。

我相信这是一件非常简单的事情，看看一些教程代码是如何由 1/2 行组成的，但对我来说似乎仍然太多了，无法理解它。

下面的代码正在进行中，响应能力似乎是今天的标准，如果有人能向我解释如何做到这一点，我将不胜感激。

<div class="container">
<div class="top">
<div class="t_e1"></div>
<div class="t_e2"></div>
<div class="t_e3"></div>
</div>
<div class="main"></div>
<div class="bottom">
<div class="b_e1"></div>
</div>
</div>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100fv;
background-color: brown;
}
.container {
min-height: 100%;
background-color: aquamarine;
grid-template-columns: 1fr 1fr;
display: grid;
}
.top {
background-color: blue;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.t_e1 {
background-color: antiquewhite;
display: grid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.main {
background-color: blueviolet;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 5;
}
.bottom {
background-color: chartreuse;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
}
.b_e1 {
background-color: coral;
display: grid;    
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 6;
}
[Currently][1]
[Desired effect][2]
[1]: https://i.stack.imgur.com/Vs0lR.jpg
[2]: https://i.stack.imgur.com/wUH7H.jpg

Answer 1

这是我的解决方案：

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100fv;
background-color: brown;
}
.container {
min-height: 100%;
background-color: aquamarine;
grid-template-columns: 1fr 1fr;
display: grid;
}
.top {
background-color: blue;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.t_e1 {
background-color: antiquewhite;
display: grid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.main {
background-color: blueviolet;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 5;
}
.bottom {
background-color: chartreuse;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
}
.b_e1 {
background-color: coral;
display: grid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 6;
}

/*new code from here*/
@media (max-width: 640px) {
.top,
.bottom {
display: flex;
flex-direction: column-reverse;
}
.t_e1,
.t_e2,
.t_e3,
.b_e1 {
display: block;
}
.t_e1,
.b_e1 {
height: 15vh;
}
}

<div class="container">
<div class="top">
<div class="t_e1"></div>
<div class="t_e2"></div>
<div class="t_e3"></div>
</div>
<div class="main"></div>
<div class="bottom">
<div class="b_e1"></div>
</div>
</div>

媒体查询可以设置为所需的"屏幕大小"，您希望响应式外观显示。

Answer 2

所以响应性这个词有点模糊。您的意思是网格应该扩展到窗口的宽度吗？如果是这样，这是默认行为。或者你的意思是当屏幕宽度足够小时，网格应该垂直堆叠。我想这就是你的意思。

.HTML

<div class="cont">
<div class="a"></div>
<div class="b"></div>
</div>

.CSS

* {
margin: 0;
padding: 0;
}
.cont {
display: flex;
margin-bottom: 10px;
}
.a,
.b {
flex: 1;
padding: 20px;
}
.a {
background: red;
}
.b {
background-color: blue;
max-width: 300px;
}
@media screen and (max-width: 1000px) {
.cont {
flex-direction: column;
}
.b {
max-width: none;
}
}

解释：

• 我创建 2 个div
• 每个div 还有两个div
• 容器div 具有 css 弹性框属性
• 子div得到flex: 1告诉他们扩展(正确学习弹性框)https://www.codecademy.com/learn/learn-intermediate-css/modules/layout-with-flexbox
• div B 具有最大宽度，因此它可以扩展但不大于该宽度
• 我使用媒体查询最大宽度，这使得样式仅在满足条件时才适用，这里的条件是浏览器宽度不超过 1000px
• 在那里，我将flexbox-direction更改为列，这意味着子div 将垂直堆叠而不是水平堆叠
• 我还删除了div B 上的最大宽度