5 générateurs de grille Super CSS pour vos dispositions

Cinq Évaluation du générateur de grille CSS en ligne: Créer efficacement la disposition du Web réactive

Points de base:

• La grille CSS est un outil puissant pour créer des dispositions Web. Générateur et générateur de disposition de la grille CSS de Dmitrii Bykov.
• Bien que ces générateurs puissent simplifier le processus de création de dispositions, tous les générateurs ne prennent pas pleinement en charge la pleine fonctionnalité de la grille CSS. Dans le test de l'auteur, seul le générateur de grille CSS de Dmitrii Bykov a pu reproduire parfaitement des dispositions complexes et écrites manuellement.
• Les générateurs de grille CSS sont particulièrement utiles pour les utilisateurs qui préfèrent le codage visuel ou sont nouveaux dans la grille CSS, mais ils peuvent sembler plus restrictifs pour ceux qui connaissent mieux la grille CSS.
• Malgré ses limites, le générateur de grille CSS est toujours un outil pratique pour créer rapidement des dispositions de base. Cependant, il est très utile de comprendre les bases de la grille CSS lors de l'utilisation de ces outils, en particulier lors de la conception de dispositions plus complexes.

La grille CSS est devenue l'une des progrès les plus excitants du CSS. Il s'agit d'un outil CSS conçu pour construire n'importe quelle disposition Web à laquelle vous pouvez penser, du plus simple au plus complexe. Aujourd'hui, la grille CSS est largement soutenue par tous les navigateurs grand public - un âge des âges sombres d'utiliser le flotteur pour construire des dispositions.

Il peut être amusant d'écrire une disposition de grille CSS directement dans l'éditeur de code. Bien que la documentation de spécification soit complexe, la courbe d'apprentissage du concept clé requise pour créer une disposition simple n'est pas raide. Il y a beaucoup de ressources pour vous aider à démarrer rapidement, avec l'exemple avec l'exemple avec le maître CSS de Tiffany Brown, le terrain de mise en page de Jen Simmons classé en premier.

Pour ceux qui sont plus habitués à écrire des dispositions avec un éditeur visuel, il existe des options en ligne intéressantes à essayer.

Voici cinq outils CSS en ligne avec d'excellentes interfaces visuelles que je testerai. L'idée est: concevez une disposition basée sur la grille CSS en quelques clics, obtenez le code et exécutez-le! Testons cette idée et voyons ce qui se passe.

Disposition de la page de test

Dans cet article, je fournirai cette mise en page simple écrite manuellement écrite.

lien de démonstration de codepen

Cette disposition a plusieurs balises de conteneur HTML sous forme de conteneurs de grille dans des structures imbriquées. J'aurais pu utiliser la nouvelle fonctionnalité de sous-grille récemment ajoutée à Grid, mais au moment de la rédaction, seul Firefox 69 le prend en charge, et aucun des générateurs en ligne discuté ici n'implémente cette fonctionnalité.

Pour la plupart des générateurs de grille CSS, je concentre mes tests sur l'élément <code><ul></ul> qui agit comme le conteneur de grille pour les cartes individuelles. Le code ressemble à ceci:

.kitties > ul {
  /* grid styles */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
}

Notez que la valeur de l'attribut grid-template-columns vous permet uniquement d'ajouter une réactivité sans requêtes multimédias:

• Utilisez la fonction repeat() et l'attribut auto-fit de la grille CSS. Vous pouvez ajouter autant de colonnes que vous le souhaitez, ils s'adapteront parfaitement à la largeur de la grille, quelle que soit cette largeur.
• Utilisez la fonction minmax() pour vous assurer que chaque colonne a une largeur d'au moins 320 pix, de sorte qu'elle peut également être affichée bien sur des écrans plus petits.

La plupart des générateurs de grille CSS n'incluent pas la fonction pour définir grid-template-columns en utilisant les fonctionnalités de grille CSS ci-dessus, vous devez donc utiliser l'outil de réglage de la requête multimédia pour ajouter une réactivité à votre mise en page.

Lorsque j'essaie d'utiliser l'outil CSS Grid Generator, je remplacerai le code ci-dessus par le code généré par chaque outil et vérifierai ses fonctionnalités en fonction des résultats affichés à l'écran. À l'exception du quatrième générateur de grille CSS dans la liste (outil basé sur Vue de Masaya Kazama). En effet, il peut construire l'intégralité de la disposition très directement et rapidement, y compris l'en-tête et le pied de page, en quelques clics et quelques ajustements à l'une des dispositions prédéfinies.

D'accord, commençons!

(Ce qui suit est une évaluation détaillée des cinq générateurs de grille CSS, y compris des images et des liens de codepen, qui sont cohérents avec le texte d'origine, mais la langue et l'expression ont été ajustées)

(Une évaluation détaillée de cinq générateurs de grille CSS doit être insérée ici, y compris des images et des liens de codepen)

Conclusion

Si vous cherchez un moyen de créer rapidement une disposition de la grille CSS de base à l'aide d'outils de visualisation, le générateur de grille CSS sera très pratique. N'oubliez pas que ces outils n'offrent généralement pas toutes les incroyables fonctionnalités de la grille CSS. Sur les cinq outils que j'ai énumérés, seul le générateur de grille CSS de Dmitrii Bykov est capable d'implémenter la plupart des fonctionnalités détaillées dans la spécification et de reproduire parfaitement la version que j'ai écrite à l'origine manuellement.

Enfin, il sera utile de comprendre les bases de la grille CSS lors de l'utilisation du générateur en ligne. Mais plus vous en savez sur la grille CSS, plus ces éditeurs visuels seront maladroits, surtout lorsque vous essayez une conception de mise en page plus audacieuse.

(Les questions fréquemment posées sur le générateur de grille CSS doivent être insérées ici, ce qui est cohérent avec le texte d'origine, mais la langue et l'expression sont ajustées)

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!