5 générateurs de grille CSS sympas
Il ne fait aucun doute que CSS Grid est un outil incroyablement puissant et passionnant pour les concepteurs Web. Il a ouvert un tas de nouvelles possibilités en termes de mise en page. Cependant, comprendre la syntaxe peut être pour le moins difficile. Si vous avez du mal, les générateurs CSS Grid sont là pour vous aider. Avec eux, vous pouvez créer une disposition de grille visuellement, et ils cracheront le bon code (ou pour simplifier encore plus les choses, utilisez un top Générateur de site Web ).
De nombreux outils de ce type sont apparus et ils sont vraiment utiles, surtout si vous n’êtes pas un expert en syntaxe. Ici, nous examinons les meilleures options. Envie d'en savoir plus? Découvrez notre guide complet de CSS Grid , consultez notre guide pour hébergement Web services, pour vous assurer que vous avez le bon pour les capacités de votre site, et si vous avez beaucoup de fichiers multimédias, assurez-vous de les sauvegarder dans stockage en ligne .
01. Layoutit! Générateur de grille CSS
Le lancement de notre liste est ce générateur de grille CSS de Layoutit! Avec cet outil, vous sélectionnez de manière interactive vos zones de grille, utilisez des boutons pour ajouter des colonnes et des lignes, nommez vos zones de grille. Vous pouvez télécharger le code ou enregistrer la conception en tant que lien permanent partageable.
02. cssgr.id
cssgr.id offre des fonctionnalités similaires à l'outil précédent, mais un style d'interface différent (celui que vous préférez dépendra probablement de vos goûts personnels). Une fonctionnalité pratique avec cet outil est que vous pouvez ajouter du texte Lorem Ipsum. C'est le travail du développeur basé à Londres Dan Netherton.
03. Générateur de modèles de grille CSS
Cette démo CodePen par le développeur créatif Anthony Dugois est une option assez unique dans notre liste. Il vous permet de créer la disposition de la grille principalement en utilisant une chaîne que vous modifiez, puis déposez dans votre CSS en tant que valeur pour le zones de modèle de grille biens.
04. Grille CSS
Ce projet de l'équipe IBM prend les spécifications de conception de la grille de votre produit et crée plusieurs ressources que votre équipe peut utiliser. Ces ressources incluent un fichier Sketch avec des plans de travail et des paramètres de grille / mise en page, du code CSS / SCSS utilisant CSS Grid avec une solution de secours CSS flexbox, ainsi qu'une extension Chrome.
05. Générateur de disposition de grille CSS
Il s'agit d'un outil relativement nouveau de Dmitrii Bykov. Vous commencez par créer des «pistes» (colonnes et lignes), puis ajoutez des éléments, puis exportez le code. Il faut un peu de temps pour s'y habituer - le screencast d'une minute ci-dessus est utile pour vous aider à démarrer.
Cet article a été initialement publié dans rapporter , le magazine le plus vendu au monde pour les concepteurs et développeurs Web. Acheter numéro 316 ou s'abonner .
Lire la suite:
