Découvrez comment les propriétés de la grille CSS fonctionnent avec Griddy.io

Si vous suivez les technologies de conception Web, vous devriez connaître les grilles CSS. Ces propriétés sont nouveaux ajouts au format CSS3 et ils deviennent rapidement le meilleur ami du développeur.

Nous avons récemment couvert un jeu amusant pour vous aider à apprendre les propriétés de la grille CSS, mais les jeux n'enseignent pas toujours des idées pratiques. C'est là que Griddy pourrait être plus utile.

Cette application Web gratuite vous permet personnaliser les grilles en temps réel et mettre à jour les extraits en direct sur la page. Vous pouvez jouer avec votre propre grille personnalisée en définissant des colonnes, des gouttières et des marges, et en restructurant la page pour apprendre le fonctionnement des propriétés de la grille..

Griddy est en fait un outil d'apprentissage gratuit fait pour les développeurs frontend qui veut en savoir plus sur les grilles CSS.

Avec cette application Web, vous pouvez ajouter de nouveaux éléments à la grille, supprimer d'autres éléments et les redimensionner pour les adapter à la présentation de votre choix..

La Webapp comporte différentes sections avec différents champs de saisie pour la modification des propriétés de la grille. Celles-ci vous permettent de reformater les lignes / colonnes de la grille et vous enseignent exactement ce que tu fais le long du chemin.

Vous pouvez définir des espaces entre les colonnes, aligner des éléments de la grille et jouer avec les paramètres de justification, tout au long de ces champs de formulaire. Chaque fois que vous apportez une modification, la mise à jour automatique de l'aperçu et du petit extrait de code situé en dessous sera mise à jour..

De cette façon, vous pouvez simplement copier et coller le CSS dans votre propre feuille de style si vous voulez le compliquer davantage. Plutôt cool!

Griddy n'est peut-être pas aussi amusant que Grid Garden, mais Griddy est un moyen pratique d'apprendre et comprendre visuellement comment les propriétés de la grille CSS affectent les éléments de la page.

Pour jouer avec cela, il suffit de visiter la page d'accueil Griddy. Vous pouvez également partager vos pensées ou vos questions avec le créateur sur Twitter @drewisthe..