Sans requêtes média : obtenir une mise en page fluide de bureau à 3 colonnes vers une mise en page mobile à 1 colonne

Les requêtes média traditionnelles jouent un rôle crucial dans l'adaptation mises en page de sites Web sur différentes tailles d’écran. Cependant, dans le but de créer un design véritablement fluide et réactif, il existe un désir d'explorer des solutions alternatives qui éliminent le besoin de requêtes multimédias.

Prenons l'exemple d'un site Web avec une disposition à 3 colonnes sur les ordinateurs de bureau :

   |  |  |
---| ---| ---|
| 1 | 2 | 3 |

Sur mobile, cependant, la mise en page doit se transformer en une seule colonne :

|
---|
| 1 |
| 2 |
| 3 |

Pour y parvenir de manière dynamique, les puissantes fonctionnalités de CSS viennent à la rescousse :

Grid and Clamp

.grid-wrapper {
   display: grid;
   gap: 15px;
   grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

La fonction repeat() crée un nombre spécifié de colonnes et clamp() garantit un minimum de 1 colonne lorsque la fenêtre d'affichage se rétrécit en dessous de 500 px.

Flexbox et marge négative

.flex-container {
   display: flex;
   flex-direction: row;
}

.flex-item {
   width: 33%; /* initial width */
   margin-right: -15px; /* negative margin to facilitate overlapping */
   background-color: red;
}

/* Breakpoint rule for smaller screens */
@media screen and (max-width: 500px) {
   .flex-item {
      margin-right: 0; /* remove negative margin on mobile */
   }
}

Cette approche garantit que les éléments s'alignent côte à côte sur les écrans plus grands mais s'empilent verticalement sur les écrans plus étroits. La marge négative crée initialement un chevauchement, qui est corrigé en la supprimant sur les écrans plus petits.

Conclusion

En tirant parti de la grille, du clamp, de la flexbox et des marges négatives, il est possible pour créer des mises en page fluides qui s'adaptent de manière transparente entre plusieurs colonnes et une seule colonne, éliminant ainsi le besoin de requêtes multimédias pour les modifications de mise en page de base.