Возможен ли этот макет с любым типом 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 обычно стекируются ниже F под 600px, поскольку они совместно используют строку при использовании display: flex.

Answer 1

Подход с использованием CSS Grid.

Начните с мобильного макета и на экранах> 600px используйте медиазапрос, чтобы вызвать более сложный макет.

Вы можете использовать margin для создания неровных высот.

Скрипка

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