这种布局甚至可以用于任何类型的CSS网格吗？ （Flex，Grid，Box Model等）

Question

在父元素上使用display: flex;和display: grid;进行了几天的努力，尝试使此布局正常工作。这是我想要创造的目标：

这种布局和流程是否适用于移动设备和桌面设备？

Fiddle

HTML

  <div class="item-table">
    <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 class="f">f</div>
  </div>

SCSS

.item-table {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;

  @media screen and (max-width: 600px) {
    align-items: flex-start;
    justify-content: flex-end;
    padding-left: 10px;
    padding-right: 10px;
  }

  .a {
    flex: 1 8%;
    border: 1px solid red;
  }

  .b {
    flex: 1 30%;
    border: 1px solid red;

    @media screen and (max-width: 600px) {
      flex: 1 50%;
    }
  }

  .c {
    flex: 1 100%;
    border: 1px solid #f00;

    @media screen and (max-width: 600px) {
      order: 4;
      flex: 0 60%;
      margin-left: 0;
      align-self: left;
    }
}

  .d {
    flex: 1;
    border: 1px solid red;

    @media screen and (max-width: 600px) {
      order: 6;
      flex: 0 20%;
    }
  }

  .e {
    flex: 1;
    border: 1px solid red;

    @media screen and (max-width: 600px) {
      order: 5;
      flex: 0 20%;
    }
  }

  .f {
    flex: 1;
    border: 1px solid red;

    @media screen and (max-width: 600px) {
      flex: 0 20%;
      order: 3;
    }
  }
}

A栏应为8％。百分比主要是估计和舍入的。不寻求绝对的完美，只是试图让比例接近发布的例子。

我遇到的问题是，C，D，E通常在600px以下的F以下堆叠，因为它们在使用时共享一行display: flex。

Answer 1

使用CSS Grid的方法。

从移动版面开始，在屏幕上＆gt; 600px，使用媒体查询来触发更复杂的布局。

您可以使用margin创建不均匀的高度。

Fiddle

.item-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-gap: .5rem;
}

.item-table>div {
  border: 1px solid grey;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

.a,
.b {
  grid-row: span 3;
}

.f {
  grid-column: 1 / 3;
  grid-row: 4 / 6;
}

@media (min-width: 600px) {
  .item-table {
    grid-template-columns: 75px 30% 1fr 1.5fr 1fr;
    grid-template-rows: auto auto;
  }
  .a {
    grid-row: 1 / -1;
    width: 75px;
    height: 75px;
  }
  .b {
    grid-row: 1;
  }
  .a,
  .c,
  .d,
  .e {
    margin: .5rem 0
  }
  .f {
    grid-row: 2;
    grid-column: 2 / -1;
  }
}

<div class="item-table">
  <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 class="f">f</div>
</div>