Привет, ребята, как правило, я довольно хорошо в CSS, но это достигло моего предела.

Я хочу сделать сетку, которую элементы всегда имеют одинаковое соотношение сторон (да, сам изображения имеет одинаковое соотношение сторон), и которые имеют прокладку или маржу между ними.

Звучит легко, но я хочу, чтобы это выглядеть так: Введите описание изображения здесь

Так что в коротким это означает:

  1. Рисунок 1 должен быть в два раза больше 2
  2. Все фото должны иметь тот же соотношение сторон
  3. Расстояние между картинками должно быть 30 пикселей
  4. Mobile Они все должны быть объединены друг с другом и на 100% шириной (но это не было проблем)

Мне удалось сделать это, чтобы он выглядел довольно похожим на то, что я хочу, но никогда не достиг этого точно.

Также это должно работать на каждый снимок снижения. Так что должно быть в зависимости от ширины экрана или ширины контейнера.

Я попробовал его с Flex и Flex-Grid, но не добился успеха.

Кто-нибудь уже сделал это и знает, как это решить?

0
Martin 30 Сен 2019 в 07:00

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>

И тот же код на Кодепен

enter image description here

3
hisbvdis 30 Сен 2019 в 05:01