这种布局甚至可以使用任何类型的 CSS 网格吗？（Flex、Grid、Box 模型等）答案

【问题标题】：Is this layout even possible with any type of CSS grid? (Flex, Grid, Box Model, etc.)这种布局甚至可以使用任何类型的 CSS 网格吗？（Flex、Grid、Box 模型等）
【发布时间】：2018-06-09 00:23:15
【问题描述】：

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

【问题讨论】：

既然你可以拥有它的模型/线框那么它是可能的
仅仅因为我可以在 illustrator 上创建它并不意味着它可以使用 html/css 对吗？
我很确定您看到了比这更复杂的布局 ;) ...顺便说一下，如果您苦苦挣扎了几天，请告诉我们您已经完成了什么？
顺便说一句，答案是是的。
@cale_b 查看更新，谢谢

标签： html css flexbox css-grid

【解决方案1】：

一种使用 CSS Grid 的方法。

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

【讨论】：