Как построить блоки .shop__body как на этом сайте?

Question

Хочу сделать аналог макета как на скриншоте. Прошу прощения, если не смог в БЭМ (только постигаю эту методологию). Решил сделать виджеты, которые сделаны в селекторе .shop на гридах, используя grid-template-areas, но пока затрудняюсь с реализацией. Как можно реализовать эту идею не используя большое количество селекторов в классах или в стилизации? Пока текущая версия моих попыток написана тут:

.shop__widgets {
  display: grid;
  grid-template-columns: repeat(6, 16.66667vw);
  grid-template-rows: repeat(2, 16.66667vw);
  grid-template-areas: "sm sm col col wide wide" "wide wide col col sm sm";
}

.shop__widgets :nth-child(n) {
  background: greenyellow;
  border: 1px solid green;
}

.shop .widget_sm {
  grid-area: sm;
}

.shop .widget_col {
  grid-area: col;
  grid-row: 1 / 8;
}

.shop .widget_wide {
  grid-area: wide;
}

<section class="shop">
  <div class="shop__widgets">
    <div class="widget_sm saddle1">widget_sm</div>
    <div class="widget_sm saddles">widget_sm</div>
    <div class="widget_col back-bag">widget_col</div>
    <div class="widget_col bike">widget_col</div>
    <div class="widget_wide gallery">widget_wide</div>
    <div class="widget_wide saddle2">widget_wide</div>
    <div class="widget_sm saddle3">widget_sm</div>
    <div class="widget_sm bag">widget_sm</div>
  </div>
  <div class="shop__btn-block"></div>
</section>

Upd1. Сделал решение левой половины блока виджетов. Прошу прощения за то, что поменялись селекторы отчасти или полностью, но мне кажется, что для реализации идеи можно найти более элегантное решение, поэтому хотелось бы узнать мнение любого, кто захочет уделить свое время на этот вопрос

div {
  padding: 5px;
  box-sizing: border-box;
  margin: 0;
}

.table {
  display: flex;
  background: red;
}
.table__left {
  flex: 1 1 50%;
  border: 1px solid pink;
}
.table__right {
  flex: 1 1 50%;
  border: 1px solid pink;
}

.shop__block .widget {
  display: grid;
  grid-template-columns: repeat 3, 1fr;
  grid-template-rows: repeat 2, 1fr;
  grid-gap: 2px;
  grid-template-areas: "sm1 sm2 col" "wide wide col";
}
.shop__block .widget .saddle1 {
  grid-area: sm1;
  background: yellow;
}
.shop__block .widget .saddles {
  grid-area: sm2;
  background: #3ae6ca;
}
.shop__block .widget_col {
  grid-area: col;
  background: green;
}
.shop__block .widget_wide {
  grid-area: wide;
  background: pink;
}

<section class="shop">
  <div class="shop__block table">
    <div class="table__left widget">
      <div class="widget_sm saddle1">widget_sm1</div>
      <div class="widget_sm saddles">widget_sm2</div>
      <div class="widget_wide saddle2">widget_wide</div>
      <div class="widget_col back-bag">widget_col</div>
    </div>
    <div class="table__right">
      <div class="widget_col bike">widget_col</div>
      <div class="widget_wide gallery">widget_wide</div>
      <div class="widget_sm saddle3">widget_sm</div>
      <div class="widget_sm bag">widget_sm</div>
    </div>
  </div>
  <div class="shop__btn-block"></div>
</section>

Answer 1

К сожалению, не очень понимаю, зачем в этом примере необходима разметка с помощью grid-template-areas. Тут достаточно простая сетка 6x2 и можно задать span-ы плиточкам:

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.item {
  background: #f6f6f6;
  padding: 1em;
  aspect-ratio: 1/1;
}

.item.col {
  grid-row-end: span 2;
  aspect-ratio: initial;
}

.item.wide {
  grid-column-end: span 2;
  aspect-ratio: initial;
}

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item col">3</div>
  <div class="item col">4</div>
  <div class="item wide">5</div>
  <div class="item wide">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

UPD: Добавил адаптивный вариант с демонстрацией принципа работы grid-template-areas (можно увидеть, развернув снипет на полный экран и уменьшив окно до 500px)

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "a b c d e e"
    "f f c d g h";
  gap: 4px;
}

.item:nth-child(3) {
  grid-area: c;
}
.item:nth-child(4) {
  grid-area: d
}
.item:nth-child(5) {
  grid-area: e
}
.item:nth-child(6) {
  grid-area: f
}

.item {
  background: #f6f6f6;
  padding: 1em;
}
.item:first-child,
.item:last-child {
  aspect-ratio: 1/1;
}

@media (max-width: 500px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
      "a b"
      "e e"
      "c d"
      "c d"
      "f f"
      "g h"
  }
  
  .item {
    aspect-ratio: 1/1;
  }
  .item:nth-child(3), 
  .item:nth-child(4) {
     aspect-ratio: 1/2;
  }
  .item:nth-child(5), 
  .item:nth-child(6) {
     aspect-ratio: 2/1;
  }
}

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

БЛОГ НА HUSL

Как построить блоки .shop__body как на этом сайте?

Ответы (1 шт):