Нужна помощь с гридами

Question

Пытаюсь по макету сверстать блок, но у меня криво получается. Надеюсь, вы поможете

Желаемый результат:

То, что есть сейчас:

SCSS-код:

&__right {
    display: grid;
    align-items: center;
    grid-template-rows: repeat(3, 170px);
    grid-template-columns: repeat(3, 160px);
    gap: 40px;
}

&__img {
    object-fit: cover;
    border-radius: 12px;
    &:nth-child(1){
        grid-column-start: 1;
    }
    &:nth-child(2){
        grid-column-start: 1;
        row-gap: 10px;
    }
    &:nth-child(3){
        grid-column-start: 3;
    }
    &:nth-child(4){
        grid-column-start: 0;
        grid-row-start: 0;
    }
    &:nth-child(5){
        grid-column-start: 0;
        grid-row-start: 0;
    }
    &:nth-child(6){
        grid-column-start: 0;
        grid-row-start: 0;
    }
}

Answer 1

Два варианта на grid-е.

div {
  box-sizing: border-box;
}
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.item {
  background: green;
  min-height: 60px;
  width: 100%;
}

.right {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.right .item:first-child {
  grid-column: 1 / 7;
  grid-row-start: 1;
}
.right .item:nth-child(2), .item:nth-child(3) {
  grid-row-start: 2;
}
.right .item:nth-child(4), .item:nth-child(5), .item:nth-child(6) {
  grid-row-start: 3;
}
.right .item:nth-child(2) {
  grid-column: 1 / 4;
}
.right .item:nth-child(3) {
  grid-column: 4 / 7;
}
.right .item:nth-child(4) {
  grid-column: 1 / 3;
}
.right .item:nth-child(5) {
  grid-column: 3 / 5;
}
.right .item:nth-child(6) {
  grid-column: 5 / 7;
}
.left {
  display: grid;
  gap: 5px;
  grid-template-areas: "first-row first-row first-row first-row first-row first-row"
                        "second-row second-row second-row third-row third-row third-row"
                        "fours-row fours-row fifth-row fifth-row sixth-row sixth-row"
}
.left .item:nth-child(1) {
  grid-area: first-row;
}
.left .item:nth-child(2) {
  grid-area: second-row;
}
.left .item:nth-child(3) {
  grid-area: third-row;
}
.left .item:nth-child(4) {
  grid-area: fours-row;
}
.left .item:nth-child(5) {
  grid-area: fifth-row;
}
.left .item:nth-child(6) {
  grid-area: sixth-row;
}

<div class="wrapper">
  <div class="left">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="right">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

БЛОГ НА HUSL

Нужна помощь с гридами

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