Pendant des années, mon instinct lorsqu'un design appelait à une véritable disposition bidimensionnelle était d'atteindre une pile de conteneurs flexibles imbriqués Une rangée de cartes à l'intérieur d'une colonne à l'intérieur d'une autre rangée, chacune fléchissant, chacune combattant les autres pour l'espace Ça a marché, dans le sens où les pixels ont fini par atterrir là où je voulais, mais ce n'était jamais le bon outil, et chaque fois que je devais changer le design j'ai payé pour le raccourci CSS Grid a été construit pour exactement cela, et le jour où j'ai arrêté de l'éviter mon code de mise en page est devenu plus court et mon balisage est devenu plus plat.
Ce qui m'a tenu à l'écart de la grille pendant trop longtemps, c'est la syntaxe. grid-template-columns: repeat(3, minmax(0, 1fr)) n'est pas une phrase qui roule sur les doigts, et la relation entre les pistes que vous déclarez et les cases qui apparaissent n'est pas évidente avant que vous ayez vu cela arriver quelques dizaines de fois Cet écart entre " ; je sais ce que je veux" ; et " ; je connais la propriété qui le produit" ; est exactement ce qu'un générateur ferme.
le Générateur de grille CSS vous permet de définir le nombre de colonnes et de lignes, de choisir une taille pour chaque axe, de composer les espaces et d'ajuster l'alignement, le tout pendant qu'un aperçu en direct revient devant vous. Le CSS exact qui produit ce que vous voyez se trouve dans une boîte prête à copier en dessous. Il tourne la grille à partir d'une spécification que vous devez mémoriser dans une mise en page que vous construisez en cliquant.
tl;dr : CSS Grid est un modèle de mise en page bidimensionnel qui contrôle les lignes et les colonnes en même temps Le conteneur le fait passer
grid-template-columns,grid-template-rows,gap« , et les quatre justifient et alignent les propriétés. Ce générateur les expose tous, affiche un aperçu en direct et émet un CSS propre qui utiliserepeat()et lefrunité. Parce que l'aperçu restitue avec les mêmes déclarations qu'il génère, ce que vous voyez est exactement ce que vous collez. Il s'exécute entièrement dans votre navigateur sans inscription.
Quel problème un générateur de grille CSS résout-il ?
La difficulté avec CSS Grid n'est pas que ce soit compliqué C'est que c'est abstrait Vous décrivez une structure (" ; trois colonnes égales avec un peu d'espace entre elles" ;) et le navigateur calcule la géométrie Cette indirection est tout le point, car c'est ce qui rend les grilles réactives sans une seule requête média Mais l'indirection est difficile à tenir dans votre tête Vous ne pouvez pas regarder repeat(3, 1fr) et ressentez instantanément le résultat comme vous pouvez regarder une grille de boîtes rendue.
Un générateur réduit la boucle d'écriture-enregistrement-actualisation en une seule interaction Vous modifiez le nombre de colonnes et trois cases deviennent quatre Vous passez d'une piste de 1fr à auto et la colonne s'enclenche à la largeur de son contenu Vous augmentez l'écart et les cases respirent Après dix minutes de cela, l'unité de fraction cesse d'être un symbole que vous traduisez et devient une chose que vous atteignez exprès Et quand vous avez fini d'explorer, vous n'êtes pas laissé avec une note à transcrire, parce que le CSS de travail est déjà écrit pour vous dans la boîte de sortie.
Il y a un deuxième avantage, plus silencieux La construction de la disposition par manipulation oblige l'outil à émettre uniquement du CSS valide et bien formé Vous ne pouvez pas produire un CSS cassé grid-template-columns valorisez en cliquant, de sorte que la sortie est toujours quelque chose que vous pouvez coller en toute confiance Cette fiabilité est la raison pour laquelle je garde un ensemble de constructeurs visuels CSS à proximité plutôt que d'écrire chaque règle à partir de zéro.
Quelles propriétés le conteneur de grille contrôle-t-il ?
CSS Grid, comme flexbox, répartit la responsabilité entre le conteneur et ses éléments Le conteneur définit les pistes et la structure globale, et c'est là que vivent la plupart des décisions d'agencement, c'est donc là que se concentre le générateur Voici ce que fait chaque propriété du conteneur.
| Propriété | Ce qu'il contrôle | Valeurs communes |
|---|---|---|
grid-template-columns |
Le nombre et la taille des colonnes | repeat(3, 1fr), 200px 1fr, auto |
grid-template-rows |
Le nombre et la taille des lignes | repeat(2, auto), 100px, 1fr |
gap |
Espace entre les pistes | toute longueur, par exemple 16px ou 20px 10px |
justify-items |
Position de l'article le long de l'axe de la rangée | stretch, start, center, end |
align-items |
Position de l'article le long de l'axe de la colonne | stretch, start, center, end |
justify-content |
Position de la voie lorsque la grille est plus étroite que son conteneur, sur l'axe de la rangée | start, center, space-between |
align-content |
Position de la voie sur l'axe de la colonne | start, center, space-between |
Le modèle mental qui fait ce bâton est la distinction entre les pistes et les objets. grid-template-columns et grid-template-rows définir les voies, qui sont les voies vides de la grille L'écart se situe entre ces voies Le justify-items et align-items propriétés positionnez ensuite chaque élément à l'intérieur de la cellule qu'il occupe, tandis que justify-content et align-content positionnez tout l'ensemble des pistes à l'intérieur du conteneur lorsqu'il y a de la place libre Le générateur maintient ces deux niveaux visuellement séparés afin que vous puissiez ressentir la différence entre déplacer un élément dans sa cellule et déplacer toute la grille dans la page.
Que signifie l'unité fr ?
le fr unit est la pièce de CSS Grid qui paie pour l'ensemble du modèle, et il vaut la peine d'être compris plutôt que de copier Un fr représente une fraction de l'espace libre dans le conteneur de grille après toute taille fixe et les espaces sont soustraits Si vous écrivez grid-template-columns: 1fr 1fr 1fr[TRADUCTION], le conteneur' ; s largeur disponible est divisé en trois parties égales Écrivez 2fr 1fr 1fr et la première colonne prend la moitié de l'espace tandis que les deux autres divisent le reste. Le navigateur recalcule ces fractions sur chaque redimensionnement, c'est pourquoi une grille basée sur des fractions est fluide sans aucun point d'arrêt.
C'est le comportement qui rend la grille supérieure aux pourcentages pour la plupart des mises en page. Un ensemble de 33.33% les colonnes ignorent l'espace et les débordements, car les pourcentages plus les espaces totalisent plus que le conteneur. Les unités de fraction sont calculées une fois les espaces supprimés repeat(3, 1fr) avec un espace toujours ajusté Le générateur est par défaut 1fr colonnes pour exactement cette raison, et vous pouvez regarder trois colonnes égales tenir leurs proportions que vous changez l'écart Si vous voulez une colonne qui embrasse son contenu à la place, basculez-le sur auto, min-content, ou max-content et voir la différence immédiatement.
Comment puis-je faire une mise en page à trois colonnes ?
C'est l'une des choses les plus courantes que les gens construisent avec une grille, et la recette est composée de deux lignes. Réglez le conteneur sur display: grid et donne-le grid-template-columns: repeat(3, 1fr). Cela produit trois colonnes égales qui se répartissent en autant de lignes que nécessaire au contenu. Ajouter un gap et vous avez une disposition de carte.
Dans le générateur, vous définissez le nombre de colonnes sur trois, laissez la taille activée 1fr1, et l'aperçu présente une grille de cellules égales La boîte de sortie montre :
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}
La raison pour laquelle cela vaut la peine d'être construit en cliquant plutôt qu'en tapant est que les mises en page réelles ne sont jamais aussi propres Vous voudrez que la barre latérale soit une largeur fixe et que le contenu fléchisse, ou que la première rangée soit plus haute que le reste Chacun de ces changements est un contrôle dans le générateur et une valeur éditée dans la sortie, et vous voyez l'effet avant de l'engager dans une feuille de style Si vous décidez toujours entre la grille et une approche basée sur la flexion pour un bloc particulier, le flexbox générateur est l'outil compagnon, et la comparaison plus loin dans ce guide explique quand chacun gagne.
Quand dois-je utiliser la grille sur la flexbox ?
C'est la question qui compte le plus une fois que vous connaissez les deux modèles, et la réponse honnête est que cela dépend du nombre de dimensions de la mise en page Flexbox est unidimensionnel Il dispose les éléments le long d'un seul axe, d'une ligne ou d'une colonne, et les enveloppe si vous demandez La grille est bidimensionnelle Il contrôle les lignes et les colonnes ensemble, de sorte qu'un élément peut être positionné à la fois par sa ligne et sa colonne.
La règle pratique que j'utilise est la suivante Si je présente un ensemble de choses dans une ligne, une barre de navigation, une rangée de balises, une barre d'outils, une pile de champs de formulaire, c'est-à-dire flexbox Si je présente une structure avec à la fois des lignes et des colonnes qui doivent s'aligner les unes sur les autres, un shell de page avec un en-tête, une barre latérale et une zone de contenu, ou une galerie où chaque carte se trouve sur une ligne de grille propre, c'est-à-dire une grille Les deux ne sont pas rivaux ; une cellule de grille contient souvent un conteneur flexible, et un élément flexible est souvent une petite grille. Voici la division sous forme de tableau.
| Question | Flexbox | Grille CSS |
|---|---|---|
| dimensions | Un axe à la fois | Lignes et colonnes ensemble |
| le mieux pour | Barres d'outils, nav, rangées d'articles, étiquettes d'emballage | Mise en page, galeries, tableaux de bord, formulaires |
| Dimensionnement piloté par | Contenu, puis distribution | Le modèle de piste que vous déclarez |
| Alignement | justify-content, align-items |
Même plus justify-items, align-content |
| Usage typique | À l'intérieur d'une cellule de grille | La page globale ou le cadre de section |
Le générateur rend ce béton parce que vous pouvez construire le même résultat visuel dans les deux sens et voir qui produit la règle du nettoyeur Pour une galerie de cartes égales, grille avec repeat() est deux lignes et flex est un conteneur d'emballage avec des largeurs sur chaque enfant Pour une seule rangée qui doit étendre ses articles sur les bords, fléchissez avec space-between est le chemin le plus court.
Quelle est la différence entre l'écart, le contenu de justification et le contenu d'alignement ?
Ces trois-là sont souvent confondus parce qu'ils traitent tous de l'espace, mais ils fonctionnent à différents niveaux Le gap property définit l'espacement fixe entre les pistes, et c'est celui que vous utiliserez dans presque toutes les grilles Une seule valeur espace les lignes et les colonnes de manière égale ; deux valeurs définissent l'espacement des lignes et l'espace des colonnes séparément, dans la ligne d'ordre puis la colonne Le générateur vous permet de définir les deux espaces indépendamment et émet la sténographie uniquement lorsqu'ils diffèrent, de sorte que la sortie reste aussi courte que la situation le permet.
justify-content et align-content[TRADUCTION], par contraste, ne faites rien que lorsque les pistes grid' ; s sont plus petites que le conteneur, ce qui laisse de la place libre pour distribuer Si vos colonnes sont toutes des largeurs de pixels fixes et qu'elles ne remplissent pas le conteneur, justify-content: center centrera tout le bloc de voies, et space-between les poussera sur les bords Avec fr colonnes qui remplissent déjà la largeur, ces propriétés n'ont rien à distribuer et semblent ne rien faire, ce qui est une source courante de confusion Le générateur les omet de la sortie lorsqu'elles sont laissées à la valeur par défaut start, donc chaque ligne de la règle copiée est une ligne qui a un effet visible Cette habitude d'émettre uniquement des déclarations significatives est la même que celle sur laquelle je me base dans le générateur gradient et le générateur d'ombres-boîtes[TRADUCTION], parce qu'une règle pleine de lignes sans opération est une règle à laquelle vous ne pouvez pas faire confiance en un coup d'œil.
Comment le générateur garde-t-il l'aperçu honnête ?
Le piège avec n'importe quel constructeur visuel est que l'aperçu et le code exporté peuvent dériver à part Un outil qui rend son aperçu dans un sens et génère son code dans un autre sens est pire qu'inutile, car il vous enseigne une mise en page qui ne se reproduira pas Ce générateur évite cela en construisant à la fois l'aperçu et le CSS copié à partir d'une seule liste de déclarations La même fonction qui décide quelles propriétés émettre est celle qui stylise les zones d'aperçu, donc ce que vous voyez est exactement ce que vous collez Il n'y a pas de chemin de rendu séparé qui pourrait être en désaccord.
Ce choix de conception est la raison pour laquelle la sortie est utilisée repeat() pour tout axe comportant plus d'une piste Une seule piste est émise comme la taille nue, mais deux ou plus s'effondrent repeat(n, size)[TRADUCTION], qui est à la fois ce qu'un humain écrirait et ce qui maintient la règle lisible à mesure que le nombre augmente C'est une petite chose, mais c'est la différence entre la sortie que vous expédieriez et la sortie que vous réécririez.
Construire une grille de cartes réactive, étape par étape
Voici un workflow que j'utilise souvent Commencez par le nombre de colonnes à trois et la taille sur 1fr. Vous avez maintenant trois colonnes fluides égales. Définissez la taille des lignes sur auto ainsi, chaque rangée grandit pour s'adapter à sa carte la plus haute Augmentez l'espace jusqu'à quelque chose de confortable, une vingtaine de pixels pour les cartes C'est une grille de cartes complète et réactive, et la sortie est de quatre lignes.
Pour le faire envelopper tout seul sans requêtes médiatiques, la prochaine étape d'un véritable projet est d'échanger repeat(3, 1fr) pour repeat(auto-fill, minmax(240px, 1fr))« , qui indique au navigateur de s'adapter à autant de colonnes de 240 pixels minimum que possible et de les étirer pour les remplir. Le générateur vous donne le point de départ à nombre fixe ; qu'une modification le transforme en une grille d'auto-emballage. Comprendre le point de départ est ce qui rend l'édition évidente, et c'est tout l'argument en faveur de l'apprentissage de la mise en page en la construisant plutôt qu'en la collant. Les arguments plus larges en faveur de l’assemblage d’un ensemble d’outils qui fonctionnent de cette façon sont en jeu Boîte à outils pour les développeurs Web« , et les habitudes de flux de travail qui le sous-tendent sont dans le » Outils de productivité des développeurs guide.
Quels navigateurs prennent en charge CSS Grid ?
CSS Grid est pris en charge dans tous les navigateurs actuels et ce depuis des années Les propriétés émises par ce générateur sont standard et non préfixées, donc la sortie fonctionne dans Chrome, Firefox, Safari et Edge sans préfixes ni fallbacks de fournisseurs pour tout navigateur qu'un projet cible de manière réaliste aujourd'hui gap la propriété dans les conteneurs de grille, qui était la dernière pièce à atterrir largement, est également universellement prise en charge maintenant Cela signifie que le CSS que vous copiez est prêt pour la production tel qu'écrit, ce qui n'était pas toujours vrai dans les premières années de grille et est l'une des raisons pour lesquelles le modèle est enfin le choix par défaut plutôt qu'une amélioration progressive Pour les règles sous-jacentes, la spécification CSS Grid Layout Module Level 1 du W3 C est la source principale, et il vaut la peine d'être lu une fois que le générateur vous a donné l'intuition de le suivre.
Si vous construisez une boîte à outils visuelle plus large à côté de celle-ci, le générateur de rayon frontière et Générateur de pinces CSS complétez l'ensemble et le Guide des outils de codage recueille ceux que j'atteins pour la plupart.
Questions fréquentes
Qu'est-ce qu'un générateur de réseau CSS ?
Un générateur de grille CSS est un outil visuel qui construit le code de disposition de grille CSS à partir des paramètres que vous choisissez. Vous choisissez les colonnes, les lignes, les tailles de piste, les espaces et l'alignement, et il génère le modèle de grille CSS ainsi qu'un aperçu en direct du résultat.
Que signifie l'unité fr dans CSS Grid ?
L'unité fr représente une fraction de l'espace libre dans le conteneur de grille. grille-modèle-colonnes : repeat (3, 1fr) crée trois colonnes qui prennent chacune une part égale de la largeur disponible et refluent au fur et à mesure que le conteneur se redimensionne.
Quelle est la différence entre CSS Grid et flexbox ?
CSS Grid est un modèle bidimensionnel qui contrôle les lignes et les colonnes ensemble, idéal pour les mises en page et les grilles de cartes Flexbox est unidimensionnel, posant des éléments le long d'un seul axe, idéal pour les barres d'outils et les lignes Elles sont complémentaires et souvent utilisées ensemble.
Comment puis-je faire une grille réactive ?
Utilisez des unités fr pour que les pistes partagent la largeur disponible, et combinez la répétition () avec minmax () et le remplissage automatique ou l'ajustement automatique pour les grilles qui s'enroulent d'elles-mêmes Ce générateur émet la répétition () avec les pistes fr comme point de départ que vous pouvez étendre.
Quelle est la propriété gap dans CSS Grid ?
gap définit l'espacement entre les pistes de grille Une seule valeur espace les deux lignes et les colonnes de manière égale ; deux valeurs définissent séparément l'espacement des lignes et l'espace des colonnes, dans l'ordre entre l'espace entre les lignes puis entre les colonnes.
Le CSS de grille généré est-il sûr à utiliser en production ?
Oui. CSS Grid est pris en charge dans chaque navigateur moderne et l'outil émet des propriétés standard non préfixées. Tout le traitement se produit dans votre navigateur, donc rien n'est téléchargé et l'outil fonctionne hors ligne une fois chargé.
Est-ce que le générateur de grille CSS fonctionne sur mobile ?
Oui. L'outil est entièrement réactif et fonctionne dans n'importe quel navigateur moderne sur les téléphones, tablettes et ordinateurs de bureau Le CSS généré est identique quel que soit l'appareil sur lequel vous le construisez.
Ce générateur de grille CSS est-il gratuit ?
Oui. Il est entièrement gratuit sans inscription, sans filigrane et sans limite d'utilisation. La grille CSS qu'il produit vous appartient d'utiliser dans n'importe quel projet.
