Lorsqu’on conçoit une interface web, il est crucial de s’assurer que l’affichage est adapté à tous les écrans. Une bonne gestion du positionnement des éléments permet d’améliorer l’expérience utilisateur. Dans cet article, nous allons voir comment organiser nos éléments de manière différente sur mobile et sur PC, en utilisant display: grid et display: contents en SCSS.

Objectif

Nous souhaitons obtenir la disposition suivante :

• Sur PC : Deux colonnes (une principale et une secondaire de 300px de large), avec les éléments bien rangés dans leur colonne respective.
• Sur mobile : Une disposition en une seule colonne, en alternant les éléments de chaque colonne.

Pour cela, nous allons :

1. Utiliser une grid sur PC avec grid-template-columns: 1fr 300px.
2. Utiliser display: contents pour fusionner les colonnes dans une seule à l’affichage mobile.
3. Appliquer un display: flex en column sur mobile pour alterner les éléments.

HTML

<div class="container">
  <div class="column-left">
    <div class="item">Item 1</div>
    <div class="item">Item 3</div>
    <div class="item">Item 5</div>
  </div>
  <div class="column-right">
    <div class="item">Item 2</div>
    <div class="item">Item 4</div>
    <div class="item">Item 6</div>
  </div>
</div>

SCSS

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;

  .column-left, .column-right {
    // `display: contents` permet de supprimer la div du rendu visuel tout en conservant ses enfants dans le flux.
    display: contents;
  }

  @media (min-width: 768px) {
    grid-template-columns: 1fr 300px;
    .column-left,
    .column-right {
      display: flex;
      flex-direction: column;
    }
  }
}

.item {
  padding: 20px;
  background: lightgray;
  margin: 10px 0;
}

// Alternance des éléments
@for $i from 1 through 3 {
  .column-left .item:nth-child(#{$i}) { order: (2 * $i - 1); }
  .column-right .item:nth-child(#{$i}) { order: (2 * $i); }
}

Explication

• Sur PC (>= 768px) : .container est une grid avec deux colonnes.
• Sur mobile (< 768px) : display: flex en column est appliqué pour alterner les éléments.
• display: contents sur les colonnes agit comme si ces divs n’existaient plus dans le rendu, en laissant seulement leurs enfants visibles et intégrés directement dans container.

Démo

Testez le code sur JSFiddle : jsfiddle.net/x2uhd5eg/

Avec cette technique, nous obtenons une mise en page fluide et adaptée à toutes les tailles d’écran. Profitez d’un layout optimisé et moderne !