Conception Web réactive avec CSS Grid et Flexbox-tutoriel CSS-php.cn

Responsive Web Design with CSS Grid and Flexbox

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, les sites Web au design réactif sont évolutifs, 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 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Grid</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-item" style="background-color: #FF5733;">1</div>
        <div class="grid-item" style="background-color: #33FF57;">2</div>
        <div class="grid-item" style="background-color: #3357FF;">3</div>
        <div class="grid-item" style="background-color: #FF33A1;">4</div>
        <div class="grid-item" style="background-color: #33FFF1;">5</div>
        <div class="grid-item" style="background-color: #FFA133;">6</div>
    </div>
</body>
</html>

Copier après la connexion

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;
}

Copier après la connexion

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 :

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Row</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="flex-container">
        <div class="flex-item" style="background-color: #FF5733;">1</div>
        <div class="flex-item" style="background-color: #33FF57;">2</div>
        <div class="flex-item" style="background-color: #3357FF;">3</div>
        <div class="flex-item" style="background-color: #FF33A1;">4</div>
    </div>
</body>
</html>

Copier après la connexion

HTML :

Semblable à l'exemple de grille, le code HTML crée ici un conteneur flexible avec des boîtes 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;
}

Copier après la connexion

CSS:
The CSS here uses Flexbox properties to create a responsive layout that adapts to various screen sizes. The display: flex; in the .flex-container gives its child elements, or (flex items), Flexbox functionalities. The flex-wrap: wrap; property allows items to flow onto multiple lines if the container's width is exceeded. The justify-content: center; property centers the flex items along the main axis, so there is a balanced layout regardless of the number of items. The gap: 10px; property introduces uniform spacing between items, improving overall organization. Each .flex-item is also a flex container, using display: flex; to allow further alignment of its inner content, which is centered both vertically and horizontally using justify-content: center; and align-items: center;. The fixed dimensions of height: 100px; and width: 100px; provide uniformity, while the combination of these properties gives the layout a pleasant look while adapting to the needs of different devices.

Example of Responsive Web Design: Flexbox Layout

This flexbox layout demonstrates severalresponsive design characteristics.

Flex Wrapping: The flex-wrap: wrap; property makes boxes move to the next line when they can't fit in the row, adapting to different viewport widths.
Centered Items: Items remain centered regardless of the screen size, improving the overall presentation.
Fixed Dimensions: The boxes have a specific size, but they wrap and readjust based on the available space, allowing for a responsive layout.

Comparing CSS Grid and Flexbox

When it comes to layout design in CSS, Grid and Flexbox are both great choices, but they serve different purposes. CSS Grid is a two-dimensional layout system that allows you to create complex grid structures with rows and columns, making it ideal for layouts where precise control over both dimensions is required, such as in web applications or dashboards. On the other hand, Flexbox is a one-dimensional layout model that is best at distributing space along a single axis—either horizontally or vertically—making it perfect for simpler layouts or smaller components like buttons or navigation menus. While you might choose Grid for a comprehensive, structured layout where elements need to align across both axes, Flexbox would be your go-to for an adaptive, fluid layout that needs to respond to content size. In the end, your choice should depend on the specific needs of your project; often, using both together, complementarily, can give you the best results.

Conclusion

With CSS Grid and Flexbox, you can create adaptable layouts that look great on any device. These examples illustrate how straightforward it can be to implement dynamic designs.

Now it's your turn! Experiment with these techniques, modify the colors and layout settings, and see how simple it is to create fun and responsive designs.
``
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=For%20a%20major%20layout%20style,helpful%20when%20working%20with%20rows.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!