CSS网格断行

问题描述 投票:0回答:1

我正在尝试实现一个CSS网格模板,其行为应如下所示:

在桌面上,它应该是这样的

Desktop

对于平板电脑

Tablet

和移动

Mobile

我使用网格和模板区域实现,但我有平板电脑的问题。要求是,如果B中的内容不适合,比方说,50%的空间,那么,应该有一个断裂线,因此B将占用100%的空间而C将被推到第3行(正如在移动中)

我不确定网格是否可行。我尝试使用auto-fitauto-fill属性,但没有到达任何地方。

希望你能帮我

css css-grid
1个回答
1
投票

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>
© www.soinside.com 2019 - 2024. All rights reserved.