w3-css : Mise en page responsive en 3 colonnes avec des blocs de différentes hauteurs

Question

J'essaie de construire une mise en page web réactive avec w3.css. Elle est censée se composer de lignes avec trois colonnes sur les grands écrans, deux sur les écrans moyens et une colonne sur les petits appareils et les appareils mobiles. Chaque ligne est composée de tuiles qui peuvent avoir l'une des deux hauteurs fixes.

<div class="w3-content w3-white" style="max-width:600px">   
    <div class="w3-row-padding ">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">1</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">2</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">3</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">4</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">5</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">6</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">7</div>                     
    </div>
</div>

Je m'attendrais au résultat suivant sur un grand écran avec une disposition en 3 colonnes :

Le code ci-dessus fonctionne correctement avec une mise en page à une ou deux colonnes, mais produit le résultat indésirable suivant avec trois colonnes :

Si je termine le w3-row-padding après trois carreaux, la disposition en trois colonnes est correcte, mais j'obtiens un désordre avec les écrans de taille moyenne comportant deux colonnes.

<div class="w3-content w3-white" style="max-width:600px">   
    <div class="w3-row-padding">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">1</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">2</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">3</div>
    </div>
    <div class="w3-row-padding">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">4</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">5</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">6</div>
    </div>
    <div class="w3-row-padding">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">7</div>                     
    </div>
</div>

C'est ce que produit le code ci-dessus sur des écrans de taille moyenne :

Toute aide est la bienvenue

Answer 1

Cela vous conviendrait-il ? https://codepen.io/panchroma/pen/BmXOOe

L'HTML est exactement comme vous l'avez posté, sauf que j'ai ajouté la classe "parent" au w3-row-padding. Nous utiliserons cette classe pour cibler les colonnes enfants avec le CSS.

HTML

<div class="w3-content w3-white" style="max-width:600px">   
    <div class="w3-row-padding parent">  <!-- note new class in this line -->
     .... 
    </div>  
  </div>

CSS est

@media (min-width: 993px){
  .parent .w3-col:nth-child(3n + 1){
    clear:left;
  }
}  

La logique de ce code est que lorsque la fenêtre est de 993px ou plus (la largeur à laquelle la grille w3.css passe de 2 colonnes à 3 colonnes), il faut utiliser le sélecteur nth-child pour sélectionner la 1ère, 4ème, 7ème, 10ème, ... (3n +1) colonne de la rangée et appliquer la règle clear:left. Cela garantit que cette colonne flottera jusqu'au début de la ligne suivante.

Plus d'informations sur le fonctionnement du sélecteur nth-child :
https://css-tricks.com/how-nth-child-works/

J'espère que cela vous aidera !