Привет, ребята, как правило, я довольно хорошо в CSS, но это достигло моего предела.
Я хочу сделать сетку, которую элементы всегда имеют одинаковое соотношение сторон (да, сам изображения имеет одинаковое соотношение сторон), и которые имеют прокладку или маржу между ними.
Звучит легко, но я хочу, чтобы это выглядеть так: 
Так что в коротким это означает:
- Рисунок 1 должен быть в два раза больше 2
- Все фото должны иметь тот же соотношение сторон
- Расстояние между картинками должно быть 30 пикселей
- Mobile Они все должны быть объединены друг с другом и на 100% шириной (но это не было проблем)
Мне удалось сделать это, чтобы он выглядел довольно похожим на то, что я хочу, но никогда не достиг этого точно.
Также это должно работать на каждый снимок снижения. Так что должно быть в зависимости от ширины экрана или ширины контейнера.
Я попробовал его с Flex и Flex-Grid, но не добился успеха.
Кто-нибудь уже сделал это и знает, как это решить?
1 ответ
Рисунок 1 должен быть в два раза больше 2
Я думаю, что это правило может быть только частично наблюдается.
Все фото должны иметь тот же соотношение сторон
Это невозможно, поскольку большое изображение не может быть равно в высоте до двух меньших изображений с тем же соотношением сторон + 30PX GAP.
Результат
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
gap: 30px;
max-width: 1100px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.item {
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
font-weight: 700;
color: #FF0000;
background: #333333;
}
.item--big {
grid-column: span 2;
grid-row: span 2;
}
.item--right {
grid-column-end: -1;
}
.item__inner {
height: 0;
padding-bottom: 50%;
}
.item__content {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
}
@media (max-width: 750px) {
.grid {
grid-template-columns: 1fr;
}
.item--big {
grid-column: span 1;
grid-row: span 1;
}
}<ul class="grid">
<li class="item item--big">
<div class="item__inner">
<img class="item__content" src="https://picsum.photos/536/354">
</div>
</li>
<li class="item">
<div class="item__inner">
<img class="item__content" src="https://picsum.photos/536/354">
</div>
</li>
<li class="item">
<div class="item__inner">
<img class="item__content" src="https://picsum.photos/536/354">
</div>
</li>
<li class="item item--big item--right">
<div class="item__inner">
<img class="item__content" src="https://picsum.photos/536/354">
</div>
</li>
<li class="item">
<div class="item__inner">
<img class="item__content" src="https://picsum.photos/536/354">
</div>
</li>
<li class="item">
<div class="item__inner">
<img class="item__content" src="https://picsum.photos/536/354">
</div>
</li>
</ul>И тот же код на Кодепен
En Español