Implémentez la disposition des éléments dynamiques multi-colonnes à l'aide de la grille CSS

Cet article détaille comment utiliser la disposition de la grille CSS pour gérer élégamment les éléments HTML générés dynamiquement, afin qu'ils soient disposés soigneusement dans un nombre fixe de colonnes, résolvant ainsi le problème que les éléments ne peuvent pas être automatiquement enveloppés dans des méthodes de mise en page traditionnelles. Grâce à des attributs principaux tels que l'affichage: grille et colonnes-template, nous pouvons facilement réaliser des dispositions multi-colonnes flexibles et réactives, améliorant considérablement l'organisation et la lisibilité du contenu de la page.

Défis du contenu dynamique Multi-Colonne Dayout

Dans le développement Web, nous devons souvent présenter une liste de données backend (telles que les chaînes dans les tableaux PHP). Lorsque ces données sont rendues sous forme d'éléments HTML (tels que Div), une exigence commune est de les organiser dans un nombre fixe de colonnes (telles que 3 par ligne) et de les envelopper automatiquement lorsque la limite de colonne est atteinte. Les méthodes de mise en page traditionnelles, telles que l'utilisation d'attributs flottants ou à l'aide de balises

, conduisent souvent à un code complexe, difficile à maintenir et ont des limites dans la conception réactive. Par exemple, le simple fait de mettre tous les divs dans un seul conteneur et de l'utilisation d'une boucle FOREAK entraînera généralement que tous les div soient affichés sur la même ligne, en ne réalisant pas la disposition colnaire souhaitée.

Solution de disposition de la grille CSS

La disposition de la grille CSS est un outil puissant pour les dispositions 2D (rangées et colonnes) dans le CSS moderne. Il fournit un moyen intuitif et flexible de définir la structure du maillage d'un conteneur et de contrôler précisément la position et la taille des éléments enfants dans le maillage. La grille CSS est idéale pour implémenter une disposition multi-colonnes avec un nombre fixe de colonnes.

Concepts et attributs de base

Pour implémenter la disposition multi-colonnes à l'aide de la grille CSS, les deux propriétés CSS suivantes sont principalement impliquées:

1. Affichage: grille; ou affichage: réseau en ligne; :
   • Définissez le conteneur parent comme un récipient de grille. La grille fait du conteneur un élément au niveau du bloc, occupant toute la largeur de son élément parent.
   • Le réseau en ligne fera du conteneur un élément au niveau du bloc dans la ligne, et sa largeur est déterminée par le contenu. Choisissez en fonction des besoins spécifiques.
2. grille-template-columns; :
   • Cette propriété définit la structure de colonne de la grille, y compris le nombre de colonnes et la largeur de chaque colonne.
   • Les largeurs de colonne peuvent être spécifiées dans diverses unités, telles que les pixels (PX), les pourcentages (%) ou FR (unité fractionnaire). L'unité FR convient particulièrement pour créer des colonnes flexibles et réactives.

Exemple: implémentez une disposition de 3 colonnes par ligne

Supposons que nous ayons un conteneur avec plusieurs éléments div et que nous voulons qu'ils affichent 3 par ligne.

Structure HTML:

Tout d'abord, nous avons besoin d'un conteneur parent pour envelopper tous les éléments de div de l'enfant pour être disposés. Ces sous-divismes peuvent être générés dynamiquement par des scripts côté serveur tels que PHP.

 

<adal>
    <meta charset="utf-8">
    <meta name="Viewport" content="width = Device-width, initial-scale = 1.0">
    <title> CSS Grid Multi-Column Disposition Exemple </title>
    <link rel="Stylesheet" href="style.css">
 head>


    <div id="struct">
        >
        <div class="élément"> Projet A: Détails du contenu </div>
        <div class="élément"> Projet B: Détails du contenu </div>
        <div class="élément"> Projet C: Détails du contenu </div>
        <div class="élément"> Projet D: Détails du contenu </div>
        <div class="element"> Project E: Détails du contenu </div>
        <div class="élément"> Projet F: Détails du contenu </div>
        <div class="element"> Project G: Détails du contenu </div>
        
    </div>

    <entr type="bouton" onclick="addNewDiv ();" value="Ajouter un nouveau projet" id="btn">

    <script src="script.js"> </ script>

</script></entr></adal>

CSS Style (style.css):

Il s'agit d'un élément clé de la mise en œuvre d'une disposition multi-colonnes. Nous appliquons le style au conteneur parent #struct et aux éléments enfants.

 / * Style de conteneur parent * /
#struct {
    Affichage: grille; / * défini comme un conteneur de grille * /
    / * Définissez la disposition de 3 colonnes. 1FR signifie l'espace disponible également divisé, réalisant des 3 colonnes flexibles * / /
    grille-template-colonnes: répéter (3, 1fr);
    / * Ou utiliser la largeur fixe: grille-template-colonnes: 150px 150px 150px; * /
    / * Ou utilisez le pourcentage: grille-template-colonnes: 33% 33% 33%; * /

    Écart: 15px; / * Espacement entre les colonnes et les lignes * /
    rembourrage: 20px;
    Border: 1px solide #ccc;
    Color d'arrière-plan: # f9f9f9;
}

/ * Style de sous-élément * /
.élément {
    Border: 1px solide # 007BFF;
    Color d'arrière-plan: # E0F7FA;
    rembourrage: 15px;
    Texte-aligne: Centre;
    Border-Radius: 5px;
    Box-Shadow: 0 2px 4px RGBA (0,0,0,0,1);
    Min-Height: 80px; / * Assurez-vous que l'élément a une certaine hauteur * /
    Affichage: flex; / * Centre le contenu verticalement * /
    Align-Items: Centre;
    Justification-contenu: centre;
}

/ * Style de bouton (pour l'ajout dynamique de démonstration) * /
#btn {
    Police: 1.1em "Arial", Sans-Serif;
    Largeur: 160px;
    hauteur: 45px;
    marge: 20px;
    Color en arrière-plan: # 007BFF;
    Couleur: blanc;
    Border: aucun;
    Border-Radius: 5px;
    curseur: pointeur;
    Transition: Color de l'arrière-plan 0.3S facilité;
}

#BTN: Hover {
    Color d'arrière-plan: # 0056B3;
}

Javascript (script.js - utilisé pour démontrer l'ajout dynamique d'éléments):

Bien que les éléments puissent être générés par le backend dans les applications réelles, nous pouvons simuler des ajouts dynamiques avec JavaScript pour vérifier l'effet de mise en page.

 Soit ElementCount = 0;

fonction addNewDiv () {
    elementCount;
    const div = document.CreateElement ("div");
    div.classList.add ("élément");
    div.innerhtml = `nouveau projet $ {elementCount}: Ajouter dynamiquement du contenu`;
    document.getElementById ("struct"). APPENDCHILD (div);
    // Faites défiler vers l'élément nouvellement ajouté si nécessaire // div.scrolLinToView ({comportement: 'smooth', block: 'end'});
}

// Ajoutez des éléments initiaux lorsque la page charge document.addeventListener ('DomContentOaded', () => {
    pour (soit i = 0; i <h4> Explication détaillée des principales propriétés du réseau CSS</h4>

• grille-template-colonnes: répéter (3, 1fr);

  • La fonction Repeat () est une caractéristique puissante de la grille CSS, qui est utilisée pour définir à plusieurs reprises des colonnes ou des lignes.
  • 3 signifie répéter 3 fois.
  • 1FR représente une unité de "fraction" dans laquelle chaque colonne occupe l'espace disponible. Cela signifie que les 3 colonnes égaliseront les largeurs disponibles du conteneur parent. C'est la meilleure façon de mettre en œuvre des colonnes de monospace réactives.

• Autre utilisation de la colonne de la grille:

  • Largeur de pixel fixe: Grid-Template-Colonnes: 150px 150px 150px; - Correction de la largeur de 150px par colonne. Si la largeur totale est insuffisante, un débordement peut se produire.
  • Pourcentage de largeur: colonnes de tempête de grille: 33% 33% 33%; - Chaque colonne occupe 33% de la largeur du conteneur parent. Veillez à laisser de l'espace pour GAP, sinon cela peut provoquer un débordement.
  • Unités mixtes: Grid-Template Colonnes: 100px 1FR 2FR; - La première colonne est de 100px, et l'espace restant est alloué 1: 2 par la deuxième colonne et la troisième colonne.
  • Mot-clé automatique: Grid-Template-Colonnes: Auto Auto Auto; - La largeur de la colonne est déterminée par son contenu. Si la largeur du contenu est insuffisante, l'espace restant sera divisé également.

• Attribut GAP:

  • Écart: 15px; est l'abréviation de la grille-row-gap et de la grille-colonne-gap, qui est utilisée pour régler l'espacement entre les cellules de la grille. C'est beaucoup plus pratique et précis que la configuration manuelle des marges pour chaque élément enfant.

Plus de configuration de colonne

Si vous avez besoin d'afficher 4 divs par ligne, modifiez simplement la propriété de colonnes de remplaçant de grille:

 #struct {
    Affichage: grille;
    Grid-Template-Colonnes: répéter (4, 1FR); / * 4 colonnes par ligne, monospace * /
    Écart: 10px;
}

De même, la colonne 5 est définie pour répéter (5, 1FR), etc.

Notes et meilleures pratiques

1. Conception réactive: l'utilisation d'unités FR combinées avec Repeat () est un moyen puissant de créer des dispositions réactives. Lorsque la largeur du conteneur change, la largeur de la colonne sera automatiquement ajustée. Pour des exigences réactives plus complexes, vous pouvez combiner les requêtes multimédias (@Media) pour modifier la valeur des colonnes de temps de grille à différentes tailles d'écran. Par exemple:

    @media (max-large: 768px) {
       #struct {
           grille-template-colonnes: répéter (2, 1fr); / * L'écran moyen affiche 2 colonnes * /
       }
   }
   @media (max-largeur: 480px) {
       #struct {
           grille-template-colonnes: 1FR; / * Petit écran affiche 1 colonne * /
       }
   }

2. Compatibilité du navigateur: les dispositions de grille CSS sont largement prises en charge dans les navigateurs modernes (IE10 / 11 nécessite des préfixes ou une ancienne syntaxe, mais ne sont généralement plus une considération traditionnelle). Pour les projets qui nécessitent un support pour les navigateurs plus âgés, vous pouvez envisager un schéma de secours (comme le flotteur ou le bloc en ligne) ou utiliser Polyfill.
3. Évitez l'abus des lignes de contes de grille: dans de nombreux scénarios de contenu dynamique, nous ne nous soucions que de la permutation des colonnes, tandis que le nombre et la hauteur des lignes sont variés dynamiquement. Normalement, il est de la meilleure pratique de conserver les lignes de contes de grille dans le comportement automatique par défaut (c'est-à-dire que la hauteur de la ligne est déterminée par le contenu). Il n'est pas recommandé de prérégler un grand nombre de lignes de hauteur fixe comme des lignes de flux de grille: répéter (999,90px); Sauf si vous avez des exigences très claires.
4. HTML sémantique: Bien que la grille CSS offre de fortes capacités de disposition, la sémantique de HTML doit toujours être maintenue. Il convient que les éléments div soient utilisés pour le regroupement de contenu, en évitant l'utilisation de la table pour la disposition des données non-table.
5. En savoir plus: les fonctionnalités de mise en page du réseau CSS sont très riches. En plus des colonnes de gilet de grille, il existe également des lignes de contes de grille, une grille-gap, une grille-flow, une grille et d'autres attributs. Il est recommandé de consulter des informations faisant autorité telles que les documents Web MDN pour mieux comprendre l'utilisation plus avancée du réseau CSS.

Résumer

Avec la disposition de la grille CSS, nous pouvons facilement résoudre le problème de la disposition multi-colonnes des éléments générés dynamiquement. Définissez simplement l'affichage: grille et grille-template-colonnes sur le conteneur parent pour obtenir un nombre fixe de colonnes, un emballage automatique de ligne et une disposition facile à maintenir et réactive. Cette méthode de disposition moderne est plus puissante et flexible que les méthodes traditionnelles telles que le flotteur ou le bloc en ligne, et est l'outil préféré pour créer des interfaces Web complexes.

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!