Как можно сверстать такой блок без grid правильнее?

Question

В макете есть такой блок:

Как-то его можно сверстать без гридов. Знаю это потому, что скачал fancybox и там между картинками в галерее есть похожие отступы, а display: grid в стилях там нет. Вот пример на который смотрю. Теперь хочу реализовать свои стили, а не использовать готовые. Мне удалось расположить картинки похожим на макет образом flex-ами. Вот моя разметка:

<div class="page-section__container">
    <div class="page-section__body hotel__body">
        <div class="hotel__gallery"> 
                                
         <a href="#popimg" class="hotel__gallery__link popup-link"><img class="hotel__img hotel__img-small hotel__img-01" src="img/hotel/01.jpg" alt=""></a>
         <a href="" class="hotel__gallery__link"><img class="hotel__img hotel__img-small hotel__img-02" src="img/hotel/02.jpg" alt=""></a>
         <a href="" class="hotel__gallery__link"><img class="hotel__img hotel__img-small hotel__img-03" src="img/hotel/03.jpg" alt=""></a>
         <a href="" class="hotel__gallery__link popup__link"><img class="hotel__img hotel__img-small hotel__img-04" src="img/hotel/04.jpg" alt=""></a>

         </div> 
    </div>
</div>

И стили:


    .page-section {
    width : 100%;
    height: 100%;
    margin: 200px auto;
    &__title{
    font-size: 96px;
    line-height: 128px;
    color: #E2AB3F;
    font-family: "Balqis";
    font-weight: 300;
    margin-bottom: 100px; 
    &__container {
    position: absolute;
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1230px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    }
    &__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 50%;
    min-height: 100%;
    }
.hotel{
    &__gallery{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 30px;
        max-width: 70%;
        &__link{
            margin-top: 50px;
            max-width: 40%;
        }
    }
}

Вот что у меня получилось:

Что похоже на макет, но мне бы хотелось избавиться от процентного max-width у hotel__gallery и hotel__gallery__link можно ли как-то это сделать?

Answer 1

Flex

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

.flex__container {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.flex__item {
  --margin: 10px; /* Объявление переменных */
  --elements: 2; /* Объявление переменных */
  background: gray;
  padding: 10px;
  width: calc( 100% / var(--elements) - ( ((var(--elements) * var(--margin)) - var(--margin)) / var(--elements)));
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex__item:not(:nth-child(2n)) {
  margin-right: var(--margin);
}

.flex__item:nth-last-child(n + 3) { /* отступы по оси Y между элементами, когда в линии по 2 элемента */
   margin-bottom: var(--margin);
}

@media(max-width: 600px) {
  .flex__item {
    --elements: 1;
  }
  .flex__item:nth-last-child(n + 3) { /* Обнуление отступа */
    margin-bottom: 0;
  }
  .flex__item:not(:nth-child(2n)) { /* Обнуление отступа */
    margin-right: 0;
  }
  .flex__item:nth-last-child(n + 2) { /* отступы по оси Y между элементами, когда в линии 1 элемент */
    margin-bottom: var(--margin);
  }
  
}

<div class="flex__container">
  <div class="flex__item">
    <img src="https://picsum.photos/id/0/150">
  </div>
  <div class="flex__item">
    <img src="https://picsum.photos/id/1/150">
  </div>
  <div class="flex__item">
    <img src="https://picsum.photos/id/2/150">
  </div>
  <div class="flex__item">
    <img src="https://picsum.photos/id/3/150">
  </div>
</div>

И тоже самое на гридах, для примера:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

.flex__container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.flex__item {
  background: grey;
  display: flex;
  justify-content: center;
  padding: 10px;
}

@media (max-width: 600px) {
  .flex__container {
    grid-template-columns: 1fr;
  }
}

<div class="flex__container">
  <div class="flex__item">
    <img src="https://picsum.photos/id/0/150">
  </div>
  <div class="flex__item">
    <img src="https://picsum.photos/id/1/150">
  </div>
  <div class="flex__item">
    <img src="https://picsum.photos/id/2/150">
  </div>
  <div class="flex__item">
    <img src="https://picsum.photos/id/3/150">
  </div>
</div>

БЛОГ НА HUSL

Как можно сверстать такой блок без grid правильнее?

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