Comment spanner chaque 6ème élément d'une rangée complète, dans une grille 3X3 en css ?

Question

Je suis en train de mettre en place une grille d'images 3 X N, qui doit avoir une bannière qui s'étend sur toute la colonne toutes les 6, 9,... positions.

Mais en définissant la portée, je veux que l'espace blanc restant soit rempli.

J'ai essayé d'ajouter grid-auto-flow: dense mais il ne met pas les images dans le bon ordre.

Voici le code :

.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>

Voici le lien du codepen : Mon exemple de grille

Je veux avoir une grille d'images où chaque rangée est remplie avec seulement les 6, 9... images qui s'étendent sur les colonnes. Je ne veux pas d'espaces blancs entre les images. Actuellement, j'obtiens des espaces blancs dans le 5e élément.

Comment faire pour que l'ordre soit incorrect et que l'affichage soit correct ?

Answer 1

Il suffit de changer votre sélecteur comme ceci : .grid img:nth-child(7n + 7) {

Il sélectionnera chaque 7n + 7 comme résultat, les 6 premiers éléments seront 3 en ligne et l'élément suivant prendra 100% de l'espace.