有没有办法使网格区域的表现像Flexbox？

Question

假设我在相同级别上有一个任意数量的元素：

    <container>
        <div class="h">
        <div class="b">
        <div class="h">
        <div class="h">
        <div class="b">
        <div class="hl">
        <div class="hr">
        <div class="hl">
        <div class="hr">
        <div class="h">
        <div class="f">
    </container>

我想要一个布局，就像

    grid-template-area:
        "h  h"
        "hl hr"
        "b  b"
        "f  f"

我可以将所有内容都放在正确的位置，以> grid-area ，但随后一切都沿z堆叠了使用权。因此，我考虑的两种方式是：

1. 有没有办法定义一个命名的网格区域以表现得像弹性箱一样？类似的伪代码：

   定义网格区域h：显示：flex;挠性方向：列;

或2）使每个命名区域都有自动行？因此，如果我

.h {
    grid-area: h;
}

和我有3级与H类有3个divs，这意味着

    grid-template-area:
        "h  h"
        "h  h"
        "h  h"
        "hl hr"
        "b  b"
        "f  f"

或者我还没有想过要完成这种布局的其他想法？

代码段：

.container {
  display: grid;
  grid-template-areas: "h  h" "h  h" "h  h" "hl hr" "b  b" "f  f"
}

.h {
  grid-area: h;
}

.hl {
  grid-area: hl;
}

.hr {
  grid-area: hr;
}

.b {
  grid-area: b;
}

.f {
  grid-area: f;
}

<div class="container">
  <div class="h">h1</div>
  <div class="b">b1</div>
  <div class="h">h2</div>
  <div class="h">h3</div>
  <div class="b">b2</div>
  <div class="hl">hl1</div>
  <div class="hr">hr1</div>
  <div class="hl">hl2</div>
  <div class="hr">hr2</div>
  <div class="h">h3</div>
  <div class="f">f1</div>
</div>

Answer 1

似乎不是，但是，就像一个选项一样，您可以使用顺序更改单元格的顺序：n属性并定义单元大小以适合您的布局，请参阅：

.container {
  display: grid;
  /*grid-template-areas: "h  h" "h  h" "h  h" "hl hr" "b  b" "f  f"*/
  grid-template-columns: repeat(4, 1fr);
  gap: .1rem;
}

.container > div {
  padding: .25rem;
  border: .05rem solid;
}

.h {
  /*grid-area: h;*/
  order: 1;
  grid-column: auto / span 2;
}

.hl {
  /*grid-area: hl;*/
  order: 2;
}

.hr {
  /*grid-area: hr;*/
  order: 3;
}

.b {
  /*grid-area: b;*/
  order: 4;
  grid-column: auto / span 2;
}

.f {
  /*grid-area: f;*/
  order: 5;
  grid-column: auto / span 2;
}

<div class="container">
  <div class="h">h1</div>
  <div class="b">b1</div>
  <div class="h">h2</div>
  <div class="h">h3</div>
  <div class="b">b2</div>
  <div class="hl">hl1</div>
  <div class="hr">hr1</div>
  <div class="hl">hl2</div>
  <div class="hr">hr2</div>
  <div class="h">h4</div>
  <div class="f">f1</div>
</div>