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';

问题是我的液晶显示器可能有两百个左右，这在计算和渲染时可能会非常慢。

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

Answer 1

我不确定您是否可以使用网格轻松完成此操作，但使用flexbox很容易，您可以随时调整order属性以更改小屏幕上的布局。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: