Блог

Главная - Вопросы по программированию - Как исправить эту сложную CSS-сетку фотографий, основанную на 4 столбцах?

Как исправить эту сложную CSS-сетку фотографий, основанную на 4 столбцах?

#css #css-grid

Вопрос:

Я разработал это 1-4 / 4-1 / 1 сетка и попытался реализовать ее с помощью полного решения CSS-сетки, основанного на 4 столбцах:

спроектированная сетка

Как вы можете видеть на фрагменте ниже, он почти там, за исключением того, что 4-я и 5-я, а также 8-я и 9-я фотографии должны быть под другими небольшими изображениями. Я пытался играть с сеткой-шаблоном-строками, но это становится очень сложным и быстро запутанным.
Шаблон сетки будет повторяться с 12-го элемента.

 .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 56px 40px;
  margin: 40px;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1st photo = 2 columns, 2 first rows */
.photo:nth-of-type(11n 1) {
  grid-column: 1 / span 2;
}


/* 2nd photo and other small ones */
.photo:nth-of-type(11n 1) {
  grid-column: 1 / span 2;
}

/* 11th photo = 2 columns */
.photo:nth-of-type(11n 10) {
  grid-column: 3 / span 2;
}

/* 11th photo = 4 columns */
.photo:nth-of-type(11n) {
  grid-column: 1 / span 4;
} 
 <div class="grid">
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
</div>

Ответ №1:

Вы можете упростить свой код, как показано ниже:

 .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  margin: 10px;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo:nth-child(11n   1){
  grid-area:span 2/span 2;
}
.photo:nth-child(11n   10) {
  grid-area:3/3/span 2/span 2
}
.photo:nth-child(11n   11){
  grid-column:span 4;
  margin-top:10px;
}

.photo:nth-child(11n   1),
.photo:nth-child(11n   4),
.photo:nth-child(11n   5){
  margin-bottom:10px;
} 
 <div class="grid">
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
</div>

Комментарии:

1. Это очень круто, спасибо Темани! Единственное, что разница в строках сетки применяется к каждой фотографии, а не к каждому набору из 5 фотографий, если вы понимаете, что я имею в виду. Визуально это помогает глазу иметь больше пространства после каждого блока, который я чувствую.

2. @flks проверьте обновление, вы можете играть с запасом, чтобы увеличить разрыв

3. Потрясающе! Спасибо за вашу помощь и реактивность

Ответ №2:

Я исправил твой css. Теперь у вас также может быть n*11 изображений, и это будет работать. В панели кода вы видите код, работающий с 22 изображениями: https://codepen.io/yourbraineatsyou/pen/xxroWWg

 .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 56px 40px;
  margin: 40px;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1st photo = 2 columns, 2 first rows */
.photo:nth-of-type(11n 1) {
  grid-column: 1 / span 2;
  grid-row: span 2;
}

/* 9th photo = 2 columns, last rows */
.photo:nth-of-type(11n 8) {
  grid-column: 3 / span 2;
  grid-row: span 2;
}

/* 11th photo = 4 columns */
.photo:nth-of-type(11n) {
  grid-column: 1 / span 4;
} 
 <div class="grid">
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
</div>

Комментарии:

1. Это безумие! Спасибо. Только одна вещь, я хотел бы иметь другой разрыв между строками сетки, чем разрыв между столбцами сетки для наборов 1-1-2, 2-1-1, я пробовал, но затем он применяет разрыв к каждой отдельной фотографии. у тебя есть какие-нибудь идеи?

Метки: ,