html - 这种布局甚至可以用于任何类型的 CSS 网格吗？ (柔性、网格、盒模型等)

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 通常堆叠在 F 以下> 低于 600 像素，因为它们在使用 display: flex 时共享一行。

Answer 1

一种使用 CSS 网格的方法。

从移动布局开始，在屏幕上 > 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>