Des trucs de grille CSS cool CSS pour votre blog

Il y a dix ans, j'ai commencé à apprendre CSS dans le but de modifier le style de mon blog. Bientôt, j'ai pu écrire du code sympa avec plus de fonctionnalités mathématiques et plus faciles à comprendre comme Transform. Cependant, d'autres domaines du CSS, comme la disposition, ont été mon point de douleur.

Cet article concerne un problème que j'ai rencontré il y a dix ans et que récemment a trouvé une solution intelligente. Plus précisément, il s'agit de savoir comment j'ai utilisé la technologie CSS de la grille moderne pour résoudre un problème de longue date et, dans le processus, j'ai obtenu des résultats plus frais que je ne le pensais à l'origine.

Il convient de noter qu'il ne s'agit pas d'un tutoriel sur la meilleure façon d'utiliser CSS Grid, mais plus comme un enregistrement de mon processus d'apprentissage personnel.

question

L'un des premiers articles de mon blog a été des photos aléatoires dans la ville, j'ai donc eu l'idée de créer une grille miniature de taille fixe. Pour l'esthétique, je veux que cette grille soit centrée verticalement par rapport aux paragraphes supérieur et inférieur, mais en même temps, je veux que la dernière rangée de miniatures soit alignée par rapport à la grille. Pendant ce temps, la largeur de l'article (et la largeur du maillage dans lequel) dépendra de la fenêtre.

Le code HTML ressemble à ceci:

<p></p>
<div class="grid--thumbs">
  <a href="https://www.php.cn/link/19e321d9f307ccfc1c37106191cbbc74">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174381745622040.jpg" class="lazy" alt="COOL LITTLE CSS GRID Tricks pour votre blog">
  </a>
  </div>
<p></p>

Cela semble simple, mais cela devient l'un des problèmes CSS les plus difficiles que j'ai jamais rencontrés.

Solution insatisfaisante

Ce sont les méthodes que j'ai essayées ou vues depuis des années et que je n'ai pas vraiment résolu le problème.

Limites des schémas flottants

Le schéma flottant se révèle être une impasse, car je ne peux pas comprendre comment amener la grille au centre verticalement de cette manière.

 .Grid - Thumbs {Overflow: Hidden; }
.grid - Thumbs a {float: gauche; }

La démonstration suivante montre les tentatives de schémas flottants. Redimensionner les intégres et voir comment ils fonctionnent à différentes largeurs de la fenêtre.

Insuffisant en bloc en ligne

Au début, cela semblait être une meilleure idée:

 .Grid - Thumbs {Text-Align: Centre}
.grid - Thumbs a {affichage: bloc en ligne}

Mais ce n'est pas le cas:

La dernière ligne n'est pas à gauche dans ce cas.

À un moment donné, en raison de la saisie automatique inattendue de CSS sur Codepen, j'ai trouvé une propriété appelée text-align-last qui détermine comment la dernière ligne du bloc est alignée.

Malheureusement, la définition text-align-last: left sur la grille n'est pas la solution que je veux non plus:

À ce stade, j'envisage de renoncer à l'idée de grilles de centrage vertical. La combinaison de text-align: justified et text-align-last: left produit de meilleurs résultats sur la grille?

Ce n'est pas le cas. À moins que la dernière ligne ne dispose d'une seule miniature et que l'écart entre les colonnes n'est pas trop grand. Redimensionnez l'intégration ci-dessous et voyez ce que je veux dire.

C'est presque la situation dans laquelle j'étais il y a deux ans, et après neuf ans d'essai et d'échec, je ne trouve toujours pas de solution à ce problème.

Conseils Flexbox désordonnés

Une solution Flexbox qui semble réalisable au début est d'ajouter un ::after un pseudo-élément à la grille et de définir flex: 1 sur la vignette et ce pseudo-élément:

 .grid - Thumbs {
  Affichage: flex;
  wrap flex: enveloppement;
  a, & :: après {flex: 1; }
  img {margin: auto; }
  &: After {Content: 'After'; }
}

La démonstration suivante montre comment fonctionne cette approche. J'ai ajouté des frontières violettes aux miniatures et ::after des pseudo-éléments pour faciliter la voir ce qui se passe.

Ce n'est pas ce que je veux parce que la grille miniature n'est pas centrée verticalement. Autrement dit, tant que la dernière ligne a une image de moins que les autres lignes, elle a l'air bien ... une fois qu'il y a un changement, si plus de projets sont manquants ou si aucun projets ne manque, la mise en page se casse.

C'est une mauvaise idée. Une autre approche consiste à ne pas utiliser de pseudo-éléments, mais à ajouter autant de divs vides après la vignette que nous nous attendons à l'avoir.

Nous devrions être en mesure d'approximer le nombre de colonnes attendues car la taille de la vignette est fixe et nous pouvons vouloir définir la largeur maximale de l'article, car le texte couvrant toute la largeur de l'écran peut tendre visuellement vos yeux. La division de la largeur maximale par une largeur de vignette fixe devrait donner le nombre maximal de colonnes dans ce cas.

Le premier élément vide occupera les lignes qui ne sont pas entièrement remplies de la vignette, et le reste débordera des autres lignes. Mais parce qu'ils sont zéro en hauteur, ils sont visuellement hors de propos.

Cette approche fonctionne, mais encore une fois, elle est maladroite et ne produit toujours pas le résultat exact que je veux, car il laisse parfois un grand écart laid entre les colonnes.

Solution de grille?

Compte tenu de son nom, les dispositions de grille ont toujours sonné comme la réponse. Le problème est que tous les exemples que j'ai vus à l'époque utilisaient un nombre prédéfini de colonnes, qui ne fonctionne pas pour ce modèle particulier, où le nombre de colonnes est déterminé par la largeur de la fenêtre.

L'année dernière, tout en écrivant une série de modèles d'arrière-plan CSS purs à éléments uniques, j'ai pensé à générer un tas de requêtes multimédias qui modifieraient une variable CSS --n , ce qui correspond au nombre de colonnes utilisées pour définir grid-template-columns .

 $ w: 13em;
$ h: 19em;
$ f: $ h / $ w;
$ n: 7;
$ g: 1em;

--h: # {$ f * $ w};
Affichage: grille;
grid-template-columns: répéter (var (- n, # {$ n}), var (- w, # {$ w}));
Grid-Gap: $ g;
Content de lieu: Centre;

@for $ i de 1 à $ n {
  @media (max-large: ($ n - $ i 1) * $ w ($ n - $ i 2) * $ g) {
    --n: # {$ n - $ i}
  }
}

J'étais très fier de cette idée à l'époque, même si je me sens gêné quand je regarde en arrière maintenant. Une requête multimédia par éventuel nombre de colonnes n'est pas idéale, et encore moins, elle n'est pas très utile lorsque la largeur de la grille n'équivaut pas à la largeur de la fenêtre mais est toujours un peu flexible et dépend également de la largeur de son élément de frère.

Solution magique

J'ai fini par trouver une meilleure solution lors de l'utilisation de la grille CSS et ne comprenant pas pourquoi la fonction repeat() ne fonctionne pas dans un cas spécifique. C'était tellement frustrant qui m'a incité à aller sur le site Web du MDN pour le vérifier, et j'ai remarqué le mot-clé auto-fit , et même si je ne comprends pas l'explication, j'avais un intuition pour que cela puisse aider avec cet autre problème, alors j'ai abandonné tout le reste et je l'ai essayé.

C'est ce que j'ai eu:

 .grid - Thumbs {
  Affichage: grille;
  Justification-contenu: centre;
  Grid-Gap: .25EM;
  grille-template-colonnes: répéter (auto-fit, 8EM);
}

J'ai également trouvé la fonction minmax() qui remplace la taille fixe sur les éléments de la grille. Je ne peux toujours pas comprendre pleinement comment minmax() fonctionne - plus je joue, moins je le comprends - mais dans ce cas, il ressemble à créer une grille puis à étirer ses colonnes également jusqu'à ce qu'ils remplissent tout l'espace disponible:

 grille-template-colonnes: répéter (auto-fit, Minmax (8em, 1fr));

Une autre chose cool que nous pouvons faire ici est d'empêcher l'image de se répandre lorsqu'elle est plus large que l'élément de grille. Nous pouvons le faire en remplaçant le 8EM minimum par min(8em, 100%) . Cela garantit essentiellement que l'image ne dépasse jamais 100%, mais jamais en dessous de 8EM. Merci Chris pour les conseils!

N'oubliez pas que la fonction min() ne fonctionne pas dans le bord avant le chrome!

N'oubliez pas que cela ne peut produire de bons résultats que lorsque toutes les images ont le même rapport d'aspect (comme les images carrées que j'utilise ici). Ce n'est pas un problème pour mon blog, car toutes les photos ont été prises avec mon téléphone Sony Ericsson W800i et ils ont tous le même rapport d'aspect. Cependant, si nous supprimons les images avec différents rapports d'aspect, la grille semble moins bonne:

Bien sûr, nous pouvons définir la hauteur de l'image sur une valeur fixe, mais cela déforme l'image ... à moins que nous ne définissions object-fit pour cover , ce qui résout notre problème!

Une autre idée est de transformer la première miniature en une sorte de bannière qui couvre toutes les colonnes de grille. Le seul problème est que nous ne connaissons pas le nombre de colonnes, car cela dépend de la fenêtre. Cependant, il existe une solution - nous pouvons définir grid-column-end à -1!

 .grid - Thumbs {
  / * mêmes styles qu'avant * /
  A: Premier enfant {
    grille-colonne: 1 / -1;
    img {hauteur: 13em}
  }
}

La hauteur de la première image est plus grande que celle des autres images.

Bien sûr, si nous voulons que l'image s'étend sur toutes les colonnes sauf la dernière colonne, nous la définirons à -2 et ainsi de suite ... l'indexation négative des colonnes est OK!

auto-fill est un autre mot-clé d'attribut de grille que j'ai remarqué sur MDN. Les explications de ces deux mots clés sont durables et n'ont aucun effet visuel, donc je les ai trouvées inutiles. Pire, le remplacement de auto-fit par auto-fill dans toute démonstration de grille ci-dessus ne fera aucune différence. Même après avoir regardé l'article ou essayé les exemples, comment ils fonctionnent vraiment et comment ils diffèrent reste un mystère.

Cependant, essayer différentes approches et regarder les résultats dans divers scénarios m'a finalement conduit à la conclusion: si nous utilisons la largeur de la colonne minmax() au lieu de la largeur de la colonne fixe (par exemple 8EM), il est préférable d'utiliser auto-fill au lieu de auto-fit car si nous n'avons que quelques images, les résultats seront plus beaux, comme illustré dans la démonstration interactive ci-dessous:

Je pense que mon préféré est l'idée de la grille de vignettes initiale, qui est centrée verticalement et a une largeur de colonne presque fixe (mais utilise toujours min(100%, 15em) au lieu de seulement 15EM). En fin de compte, c'est une question de préférence personnelle, et ce que vous pouvez voir dans la démo ci-dessous se trouve mieux pour moi:

J'utilise auto-fit ici car il produit le même résultat que auto-fill et a moins de caractères. Cependant, ce que je n'ai pas compris lors de la réalisation, c'est que ces deux mots clés produisent le même résultat car il y a plus d'articles dans la galerie que nous avons besoin pour remplir une ligne.

Mais une fois qu'il y a un changement, auto-fit et auto-fill produiront des résultats différents, comme indiqué ci-dessous. Vous pouvez modifier justify-content et le nombre d'éléments placés sur la grille:

Je ne sais pas lequel est la meilleure option. Je pense que cela dépend de la préférence personnelle. Combiné avec justify-content: center , auto-fill semble être un choix plus logique, mais en même temps, auto-fit produira de meilleurs effets visuels.

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!