所以我在移动设备上有一个简单的三个段落堆栈,我希望在较大视口的网格中设置样式,而不更改源顺序.
第一部分可能包含从几行到没有内容的任何内容.
在这种情况下,如何使第一行折叠,以便第二行填充空格？IE顶部为空时,最后一部分应显示在顶部
.grid {
display: grid;
grid-template-rows: min-content auto;
grid-template-columns: 60% 40%;
grid-template-areas:
"main first"
"main last";
}
.first { grid-area: first; }
.main { grid-area: main; }
.last { grid-area: last; }<div class="grid">
<b class="first">Grant me revenge!</b>
<b class="main">Arnold ipsum. Just bodies. I need your clothes, your boots, and your motorcycle. Grant me revenge! And if you do not listen, then to HELL with you. Make it quick because my horse is getting tired. Come on don't …