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>

css 网格布局每行列数不同

css grid layout different number of columns in each row

html

css

css-grid