Guide de la disposition précise des listes dynamiques et des éléments spécifiques de la grille CSS

Cet article détaille comment gérer efficacement les éléments de liste générés dynamiquement et les éléments personnalisés dans des emplacements fixes dans les dispositions de grille CSS. En tirant parti des propriétés de la grille et de la grille de la grille CSS, vous pouvez contrôler avec précision la position et la portée d'un élément spécifique dans la grille, même si l'élément n'est pas organisé dans l'ordre dans la structure HTML, réalisant un effet de mise en page flexible et professionnel.

1. Comprendre le comportement de mise en page automatique de la grille CSS

CSS Grid fournit un puissant mécanisme de disposition lors de la création de listes de produits ou d'autres présentations de contenu dynamique. Habituellement, lorsque nous définissons l'affichage: grille et grille-template-colonnes pour le conteneur parent, ses éléments enfants remplissent automatiquement les cellules de la grille dans l'ordre en HTML. Par exemple, une liste de plusieurs éléments de produit sera générée via la boucle backend et sera disposée en séquence à l'avant.

Considérez la structure HTML initiale suivante et les styles CSS, où. RED-Box représente un élément de produit généré dynamiquement, et .Green-box est l'élément spécifique qui doit être inséré:

Structure HTML initiale:

 <div id="wrapper">
  <ul id="grid-table">
    
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    
    <li class="green-box"> </li> 
  </ul>
</div>

Style CSS initial:

 #Wrapper {
  Affichage: flex;
  Justification-contenu: centre;
  Align-Items: Centre;
  Largeur: 100%;
}
# grid-table {
  Affichage: grille;
  Largeur: 90%;
  Grid-Template-Colonnes: répéter (4, 1FR); / * Quatre colonnes Layout monospace * /
  Style de liste: aucun;
  Écart: 15px; / * Espacement de la grille * /
}
.red-box {
  Largeur: 100px;
  hauteur: 100px;
  Color d'arrière-plan: rouge;
}
.Green-box {
  Largeur: 100px;
  hauteur: 100px;
  Color en arrière-plan: vert;
}

Dans cette disposition automatique par défaut, Green-Box suivra toutes les boîtes rouges et trouvera le prochain emplacement disponible dans la grille à remplir. Si l'objectif est de le placer dans une position spécifique dans la grille (comme la deuxième ligne et d'occuper les troisième et quatrième colonnes), un contrôle plus précis est nécessaire.

2. Utilisez la grille et la colonne de grille pour un positionnement précis

La grille CSS fournit des propriétés de grille et de colonne de grille, ce qui nous permet de spécifier explicitement la ligne / colonne de démarrage et la ligne / colonne de fin de l'élément de grille, écrasant ainsi son comportement automatique par défaut. Ceci est utile pour insérer des éléments spécifiques à des emplacements fixes dans des flux de contenu dynamiques.

Afin de localiser la boîte .Green à la troisième colonne de la deuxième ligne et de courir deux colonnes, nous devons y appliquer l'attribut CSS suivant:

• Grid-Row: 2;: Placez l'élément sur la deuxième rangée de la grille.
• Grid-Colonne: 3 / Span 2;: Placez l'élément à la troisième colonne de la grille et étendez deux colonnes à droite (c'est-à-dire occuper les troisième et quatrième colonnes).

Dans le même temps, pour s'assurer que les éléments peuvent s'étendre correctement aux colonnes et s'adapter aux cellules de la grille, il est recommandé de changer la largeur fixe en largeur min pour leur permettre de s'étendre en fonction de la taille des cellules de la grille.

Style CSS corrigé:

 #Wrapper {
  Affichage: flex;
  Justification-contenu: centre;
  Align-Items: Centre;
  Largeur: 100%;
}

# grid-table {
  Affichage: grille;
  Largeur: 90%;
  Grid-Template-Colonnes: répéter (4, 1FR); / * Quatre colonnes Layout monospace * /
  Style de liste: aucun;
  Écart: 15px; / * Espacement de la grille * /
}

.red-box {
  largeur min: 100px; / * Permet la mise à l'échelle en fonction des cellules de la grille * /
  hauteur: 100px;
  Color d'arrière-plan: rouge;
}

.Green-box {
  largeur min: 100px; / * Permet la mise à l'échelle en fonction des cellules de la grille * /
  hauteur: 100px;
  Color en arrière-plan: vert;
  Grid-Row: 2; / * Positionner à la deuxième ligne * /
  Colonne de grille: 3 / Span 2; / * Commencez avec la troisième colonne, étendez deux colonnes * /
}

La structure HTML reste inchangée:

 <div id="wrapper">
  <ul id="grid-table">
    
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    <li class="Red-box"> </li>
    
    <li class="green-box"> </li> 
  </ul>
</div>

Avec la modification ci-dessus, même si la boîte .Green est située après tout. D'autres éléments de la boîte rouge continueront de remplir les cellules de la grille restantes en fonction des règles de mise en page automatique et de la disposition des flux autour de .Green-box.

3. Précautions et meilleures pratiques

• Séparation de la structure HTML par rapport à CSS: l'avantage central de cette approche est que nous pouvons le contrôler avec précision via CSS même si la position d'un élément spécifique dans HTML n'est pas conforme à sa disposition visuelle. Cela permet aux structures HTML de se concentrer davantage sur la sémantique et la logique de génération de contenu dynamique, tandis que la disposition est entièrement gérée par CSS.
• Compréhension des lignes de grille: Colonne de grille: 3 / Span 2; signifie partir de la troisième ligne de grille verticale et couvrant deux cellules. Cela équivaut à la colonne de grille: 3/5; (de la troisième ligne à la cinquième ligne). Comprendre le concept de lignes de grille aide à contrôler les dispositions de manière plus flexible.
• Conception réactive: Dans les applications pratiques, les performances de mise en page sous différentes tailles d'écran doivent être prises en compte. Vous pouvez utiliser des requêtes multimédias (@media) pour ajuster les valeurs des colonnes de gilet de grille, de la ligne de grille et de la colonne de grille pour s'adapter à différents appareils tels que les téléphones mobiles, les tablettes et les ordinateurs de bureau.
• Taille de l'élément: Lorsqu'un élément de grille s'étend sur plusieurs colonnes ou lignes, l'utilisation de la largeur min ou de la hauteur min au lieu de la largeur / hauteur fixe sera plus flexible, permettant aux éléments de mettre à l'échelle en fonction de la taille de l'élément de grille qu'ils occupent, en évitant les problèmes de dépassement ou de taille.
• Nombre de contenu dynamique: si le nombre d'éléments de produit générés dynamiquement n'est pas fixe et que l'emplacement d'un élément spécifique doit dépendre du nombre d'éléments de produit, il peut être nécessaire de combiner JavaScript pour des calculs de disposition plus complexes, ou ajuster les attributs de la grille-flux (par exemple, définis à la densité) pour optimiser l'utilisation de l'espace. Mais pour l'insertion de la position fixe, le rang de grille et la colonne de grille sont les solutions les plus directes et les plus efficaces.

Résumer

Grâce aux propriétés de grille et de colonne de grille de la grille CSS, les développeurs peuvent contrôler avec précision la position de disposition des éléments de la grille et peuvent obtenir des effets de disposition très flexibles et professionnels même dans des scénarios où le contenu généré dynamiquement et les éléments fixes qui nécessitent un positionnement spécial sont mitigés. Cette méthode découple la logique de mise en page de la structure HTML, améliore la maintenabilité et la lisibilité du code et est une compétence indispensable dans la disposition du Web moderne.

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!