Как охватить каждый 6-й элемент полной строкой в ​​сетке 3X3 в css? - PullRequest
Новая
       52

Как охватить каждый 6-й элемент полной строкой в ​​сетке 3X3 в css?

2 голосов
/ 06 ноября 2019

Я настраиваю сетку изображений 3 XN, для которой нужен баннер, охватывающий весь столбец в каждых 6,9-х, ... позициях.

Но при настройке диапазона я хочу заполнить оставшееся пустое пространство.

Я пытался добавить grid-auto-flow: dense, но это не приводит к правильному порядку изображений.

Ниже приведен код: 

.grid { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  align-items: start;
  justify-items: center;
  margin: auto;
  width: 540px;
  }
.grid img {
  border: 1px solid rgba(0,0,0,0.3);
  box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
  max-width: 100%;
}
.grid img:nth-child(6) {
  grid-column: span 3;
  }
<main class="grid">
  <img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1547149600-a6cdf8fce60c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1547149600-a6cdf8fce60c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1547149600-a6cdf8fce60c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1555181937-efe4e074a301?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1547149600-a6cdf8fce60c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1547149600-a6cdf8fce60c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
  <img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Sample photo">
</main>

Вот кодовая ссылка: Пример моей сетки

Я хочу иметь сетку изображений, где каждая строказаполнен только 6,9-й ... изображения, охватывающие столбцы. Я не хочу, чтобы между ними были пробелы. В настоящее время я получаю пробел в 5-м элементе.

Как получить неправильный порядок и правильно отобразить его?

1 Ответ

1 голос
/ 06 ноября 2019

Просто измените ваш селектор следующим образом: .grid img:nth-child(7n + 7) {

Он будет выбирать каждые 7n + 7, в результате первые 6 элементов будут 3 в строке, а следующий элемент займет 100%пространства

...