我正在尝试实现一个CSS网格模板,其行为应如下所示:
在桌面上,它应该是这样的
对于平板电脑
和移动
我使用网格和模板区域实现,但我有平板电脑的问题。要求是,如果B中的内容不适合,比方说,50%的空间,那么,应该有一个断裂线,因此B将占用100%的空间而C将被推到第3行(正如在移动中)
我不确定网格是否可行。我尝试使用auto-fit
和auto-fill
属性,但没有到达任何地方。
希望你能帮我
CSS网格+媒体查询可以完成这项工作:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.container div {
border: 1px solid red;
}
.a {
grid-column-start: 1;
grid-column-end: 2;
}
.b {
grid-column-start: 1;
grid-column-end: 2;
}
.c {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 3;
}
@media only screen and (max-width: 700px) {
.a {
grid-column-start: 1;
grid-column-end: 3;
}
.c {
grid-row-start: 2;
}
}
@media only screen and (max-width: 400px) {
.container {
grid-template-columns: 300px;
}
.a {
grid-column-start: 1;
grid-column-end: 2;
}
.c {
grid-column-start: 1;
grid-row-start: 3;
}
}
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>