Les pouvoirs de la grille de la grille de la grille

Disons que nous travaillons sur la page d'accueil d'un site Web d'actualités. Vous avez probablement l'habitude de voir un contenu basé sur des cartes dans une disposition de grille, non? Voici un exemple classique, le New York Times:

Ouais, quelque chose comme ça.

Il y aura des cartes / éléments / boîtes / tout ce qui doit prendre plus de place que d'autres. Un article en vedette me vient à l'esprit.

La grille CSS serait idéale ici parce que nous travaillons dans deux directions: les lignes et les colonnes. De plus, il dispose de cette fonction de préparation qui place automatiquement les articles sur la grille en fonction de l'espace disponible. Si nous devions simplement définir la grille sur l'élément parent, et rien d'autre, chaque enfant se verrait attribuer des espaces égaux en fonction de la quantité d'espace disponible disponible sur les colonnes et les lignes.

En d'autres termes, il n'est pas nécessaire d'être strict ou explicite dans l'endroit où nous disons à notre grille de placer des articles.

Un site de journaux peut vraiment en bénéficier. Peut-être que le nombre d'articles sur la page variera. Peut-être que les publicités seront affichées dans certaines situations mais pas dans d'autres. Même si le contenu est imprévisible, la grille CSS peut rendre la mise en page prévisible en affluant automatiquement les éléments.

Avoir neuf histoires parfaitement en forme serait génial, mais nous n'en avons peut-être que huit un jour. Eh bien, la grille CSS nous a couvertes pour s'assurer que les éléments se déroulent uniformément dans les cellules.

Là où les choses peuvent devenir un peu collantes, c'est lorsque nous avons des articles qui s'étendent sur plusieurs lignes ou colonnes. Revenons à cette idée d'article en vedette et stipulons qu'il devrait s'étendre sur les deux dernières colonnes d'une ligne.

 .ARTICLE - FORTURÉ {
  Colonne de grille: 2 / Span 2;
}

Nous pourrions avoir six articles un jour parce que, encore une fois, notre contenu est un peu imprévisible.

 <div>
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
</div>

Pas de soucis! Nous nous attendons à ce que la fonction de placement automatique de Grid contourne cet article en vedette pour nous. Mais quand nous laissons tomber cet article en vedette, voici ce que nous obtenons:

Hmm, ce n'est pas ce que nous avions en tête. Ce serait tellement mieux que les cinq articles coulaient autour de l'article en vedette.

Ce qui se passe réellement, c'est que Grid prend le placement explicite de l'article en vedette et le place là où il y a suffisamment d'espace disponible pour qu'il prenne les deuxième et troisième colonnes après que les articles l'ont précédé dans la source. Il se trouve que c'est la deuxième rangée et il se trouve qu'il y a juste un espace vide devant lui car il n'y a pas d'autres articles qui le précédent dans le HTML. Grid place l'article en vedette comme indiqué et coule le reste des articles en conséquence.

Nous pouvons forcer la grille à ignorer l'ordre source et à couler l'élément suivant disponible autour de lui, même si c'est après l'article en vedette dans le HTML.

Quelle est la pépite magique avec de tels pouvoirs? Auto-flux: dense!

 .articles {
  Affichage: grille;
  Grid-Auto-Flow: dense;
  Grid-Gap: 1em;
  grille-template-colonnes: répéter (3, 100px);
  Grid-Template Rows: Repeat (3, 1FR);
}

Nous y sommes partis! Maintenant, nous pouvons être assurés que notre disposition restera intacte, quelle que soit la quantité de contenu jetée sur la grille.

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!