html - css网格布局每行中不同的列数

Question

我有一个这样的网格容器:

<div class="container">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
    <div class="e">E</div>
</div>

我正在使用 grid-template-areas 来定位它们:

.container {
    display: grid;
    grid-template-areas:
        'a b .'
        'c d e';
}

.a {grid-area: 'a';}
.b {grid-area: 'b';}
.c {grid-area: 'c';}
.d {grid-area: 'd';}
.e {grid-area: 'e';}

看起来像这样:

_____________
| A | B |   |
| C | D | E |

但是，我希望每行中的列数独立于其他行，所以我想要这样的东西:

grid-template-areas:
    'a b'
    'c d e';

我想要以下结果:

_____________
|  A  |  B  |
| C | D | E |

上面的代码不起作用。我想出的唯一解决方案是获取每行中列数的最小公分母:2 x 3 = 6。然后我将每个区域重复必要的次数:

grid-template-areas:
    'a a a b b b'
    'c c d d e e';

问题是我可能有一个 200 左右的 lcd，这在计算和渲染时可能会非常慢。

有什么方法可以在不执行上述操作的情况下实现这一目标？我仍然需要使用一个网格布局，以便在屏幕尺寸不同时可以完全移动所有元素，这意味着我不能只为每一行使用单独的网格。

Answer 1

我不确定您是否可以使用网格轻松地做到这一点，但使用 flexbox 则很容易做到，并且您可以随时调整 order 属性以更改小屏幕上的布局。

.container {
  display:flex;
  flex-wrap:wrap;
  height:300px;
}
.a,.b {
  flex-basis:calc(100% / 2);
}
.c,.d,.e {
  flex-basis:calc(100% / 3);
}

.container > div {
  border:1px solid;
  box-sizing:border-box;
}

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
</div>