Плитка из картинок с помощью Grid

Question

ul,
ol {
    padding: 0;
}

ul {
    list-style: none;
}


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

.gallery__examples {
    display: grid;
    grid-template: 280px / 580px 290px 250px;
    gap: 40px;
}

<ul class='gallery__examples'>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/580x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/290x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/250x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/250x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/290x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/580x280/000/fff' alt='Фоточка'>
      </li>
  </ul>

Доброго времени суток! Подскажите пожалуйста, как можно расположить плитку с картинками так, как показано на скриншоте. Была идея с добавочным классом и свойствами grid-column: 1/3 grid-row: 1/2; Но плитки могут ещё добавится и это надо предугать. 580px 290px 250px 1 строка 250px 290px 580px 2 строка и такой порядок будет чередоваться. Буду рад любой помощи!

Answer 1

Если сетка с фото будет с каждым рядом выглядеть также, то:

.wrapper {
  display: grid;
  grid-template: auto / 250px 290px 290px 250px;
  grid-gap: 40px;  
}

.image {
  height: 80px;
  background: blue;
}

.image:nth-child(1), .image:nth-child(6n), .image:nth-child(7n){
  grid-column: span 2;
}

<div class="wrapper">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>  
</div>

БЛОГ НА HUSL

Плитка из картинок с помощью Grid

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