В макете есть такой блок:
Как-то его можно сверстать без гридов. Знаю это потому, что скачал 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
можно ли как-то это сделать?