Conception Web réactive utilisant CSS Grid et Flexbox

La conception Web réactive est un moyen de développer des sites Web afin qu'ils fonctionnent correctement sur différents types d'appareils et de tailles d'écran. Au lieu d'avoir à créer plusieurs versions d'un site pour différents appareils, la conception réactive utilise des grilles et des mises en page flexibles, des requêtes multimédias et des images fluides pour améliorer l'expérience utilisateur, sur toutes les plateformes.

Pourquoi la conception Web réactive est-elle importante ?

Alors que de plus en plus de personnes dans le monde utilisent des téléphones portables et des tablettes pour naviguer sur Internet, avoir un site Web réactif n'est plus une option, c'est une nécessité. Une conception réactive permet une plus grande convivialité en permettant aux consommateurs d'accéder au contenu de manière transparente, quel que soit l'appareil qu'ils utilisent. Cela améliore également l'expérience utilisateur en garantissant que le contenu est visuellement cohérent et facilement lisible sur tous les appareils. Cela peut réduire la frustration et encourager l'interaction. De plus, la conception réactive assure la pérennité des sites Web, leur permettant de s'adapter aux nouveaux appareils sans avoir à procéder à des refontes approfondies.

Aujourd'hui, nous examinerons les bases de la conception Web réactive et nous concentrerons particulièrement sur deux techniques CSS puissantes : Flexbox et CSS Grid. Nous montrerons comment ces mises en page s'adaptent à différentes tailles d'écran à l'aide d'un site Web simple avec des cases et des chiffres colorés.

Une brève histoire de la conception Web réactive

La conception Web réactive a beaucoup changé depuis les débuts d'Internet. Requêtes multimédias, qui appliquent des styles basés sur les caractéristiques de l'appareil, telles que la taille de l'écran, la résolution et l'orientation. ont été introduits au début des années 2000, Flexbox a été lancé en 2012 et CSS Grid a été adopté en 2017. Ces innovations ont permis aux concepteurs de créer des mises en page adaptables sur un certain nombre d'appareils différents, offrant ainsi une meilleure expérience aux utilisateurs.

Création de mises en page réactives avec CSS Grid et Flexbox

Voyons maintenant quelques exemples pratiques qui nous permettent de voir comment fonctionnent Flexbox et CSS Grid.

Disposition de grille réactive : grille de couleurs

Nous allons créer une mise en page simple à l'aide de CSS Grid.

HTML pour la mise en page en grille :

    

        
1
        
2
        
3
        
4
        
5
        
6
    

HTML :

• Le balisage HTML crée un conteneur réactif (grille-conteneur) et des boîtes colorées (grille-élément) avec différents nombres et couleurs d'arrière-plan. La balise méta viewport permet à la mise en page d'évoluer sur différents appareils.

CSS pour la disposition en grille :

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f0f0f0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 20px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS :

• Le CSS pour la disposition de la grille utilise différentes propriétés de grille pour être plus réactif. L'affichage : grille ; La déclaration définit l'élément avec la classe grid-container comme conteneur de grille, afin que nous puissions profiter de tout ce que les grilles ont à offrir. Les colonnes de modèle de grille : répéter(auto-fit, minmax(100px, 1fr)); La propriété définit la façon dont les colonnes de la grille sont structurées : elle ajuste automatiquement le nombre de colonnes en fonction de l'espace disponible, chaque colonne ayant une largeur minimale de 100 pixels et un maximum de 1 fraction (1fr) de l'espace disponible. Cette conception permet à la grille de s’adapter à différentes tailles d’écran, afin que les éléments de la grille ne débordent pas ou ne créent pas d’espaces disgracieux. L'écart : 10px ; La propriété applique un espacement cohérent aux éléments de la grille. Enfin, nous empilons les éléments de la grille avec display: flex; et centrez leur contenu avec justifier-content: center; et align-items : centre. De cette façon, chaque élément est bien organisé et équilibré.

Exemple de conception Web réactive : disposition en grille

Cette disposition en grille utilise :

1. Nombre de colonnes dynamiques : la grille ajuste automatiquement le nombre de colonnes en fonction de la largeur de la fenêtre d'affichage, les éléments prenant un minimum de 100 px.
2. Dimensionnement flexible : l'ajustement automatique permet aux boîtes de se redistribuer et de se réorganiser si nécessaire, donnant à tout un aspect plus organisé.
3. Requêtes multimédias : bien que cela ne soit pas réellement écrit ici, la façon dont les éléments de la grille se comportent avec différentes tailles d'écran démontre le concept de requêtes multimédias en utilisant des propriétés de grille réactives.

Disposition Flexbox réactive : rangée de couleurs

Ensuite, utilisons Flexbox pour créer une simple rangée de cases colorées.

HTML pour la mise en page Flexbox :

    

        
1
        
2
        
3
        
4
    

HTML :

• Semblable à l'exemple de grille, le code HTML crée ici un conteneur flexible avec des zones d'éléments flexibles qui affichent des nombres colorés.

CSS pour la mise en page Flexbox :

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

.flex-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS :
Le CSS utilise ici les propriétés Flexbox pour créer une mise en page réactive qui s'adapte à différentes tailles d'écran. L'affichage : flexible ; dans le conteneur .flex donne à ses éléments enfants, ou (éléments flexibles), les fonctionnalités Flexbox. Le flex-wrap : envelopper ; La propriété permet aux éléments de s'écouler sur plusieurs lignes si la largeur du conteneur est dépassée. Le justifier-content: center; La propriété centre les éléments flexibles le long de l’axe principal, de sorte qu’il existe une disposition équilibrée quel que soit le nombre d’éléments. L'écart : 10px ; La propriété introduit un espacement uniforme entre les éléments, améliorant ainsi l'organisation globale. Chaque .flex-item est également un conteneur flex, utilisant display: flex; pour permettre un alignement ultérieur de son contenu interne, qui est centré verticalement et horizontalement à l'aide de justifier-content: center; et align-items: center;. Les dimensions fixes de hauteur : 100px ; et largeur : 100 px ; assurent l'uniformité, tandis que la combinaison de ces propriétés donne à l'agencement un aspect agréable tout en s'adaptant aux besoins des différents appareils.

Exemple de conception Web réactive : mise en page Flexbox

Cette disposition flexbox démontre plusieurs caractéristiques de conception réactive.

1. Flex Wrapping : Le flex-wrap: wrap; La propriété fait passer les boîtes à la ligne suivante lorsqu'elles ne peuvent pas tenir dans la ligne, en s'adaptant aux différentes largeurs de fenêtre.
2. Éléments centrés : les éléments restent centrés quelle que soit la taille de l'écran, améliorant ainsi la présentation globale.
3. Dimensions fixes : les boîtes ont une taille spécifique, mais elles s'enroulent et se réajustent en fonction de l'espace disponible, permettant une mise en page réactive.

Comparaison de la grille CSS et de Flexbox

En matière de conception de mise en page en CSS, Grid et Flexbox sont tous deux d'excellents choix, mais ils servent des objectifs différents. CSS Grid est un système de mise en page bidimensionnel qui vous permet de créer des structures de grille complexes avec des lignes et des colonnes, ce qui le rend idéal pour les mises en page où un contrôle précis des deux dimensions est requis, comme dans les applications Web ou les tableaux de bord. D'autre part, Flexbox est un modèle de mise en page unidimensionnel qui est le meilleur pour distribuer l'espace le long d'un seul axe, horizontalement ou verticalement, ce qui le rend parfait pour des mises en page plus simples ou des composants plus petits comme des boutons ou des menus de navigation. Bien que vous puissiez choisir Grid pour une mise en page complète et structurée dans laquelle les éléments doivent s'aligner sur les deux axes, Flexbox serait votre choix pour une mise en page adaptative et fluide qui doit répondre à la taille du contenu. En fin de compte, votre choix doit dépendre des besoins spécifiques de votre projet ; souvent, utiliser les deux ensemble, de manière complémentaire, peut vous donner les meilleurs résultats.

Conclusion

Avec CSS Grid et Flexbox, vous pouvez créer des mises en page adaptables qui s'affichent parfaitement sur n'importe quel appareil. Ces exemples illustrent à quel point il peut être simple de mettre en œuvre des conceptions dynamiques.

Maintenant c'est ton tour! Expérimentez ces techniques, modifiez les couleurs et les paramètres de mise en page et voyez à quel point il est simple de créer des designs amusants et réactifs.
``
sources:
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
https://kinsta.com/blog/responsive-web-design/#4-flexbox-layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://blog.logrocket.com/css-flexbox-vs-css-grid/#:~:text=Pour un style de mise en page majeur, utile lorsque vous travaillez avec des lignes.