Grille Layoutit: Apprendre la grille CSS visuellement avec un générateur

La grille Layoutit est un générateur de grille CSS open source interactif. Il vous permet de dessiner la conception et de visualiser le code dans le processus. Vous pouvez interagir avec le code, ajouter ou supprimer des lignes de piste et les glisser pour modifier la taille - vous verrez des changements dans CSS et HTML en temps réel!

Une fois la mise en page terminée, vous pouvez créer un codepen ou obtenir le code pour démarrer votre prochain projet. Cet outil met le code en premier et vous aide à l'apprendre tout en utilisant directement la grille CSS.

CSS Grid: une nouvelle façon de penser

Nous pouvons désormais créer une disposition réactive puissante pour notre expérience Web. Nous pouvons enfin apprendre à concevoir avec un outil de mise en page cohérent au lieu de mémoriser un tas de trucs pour forcer le positionnement des éléments.

Bien sûr, cela ne veut pas dire qu'un tel générateur peut nous empêcher d'avoir à comprendre le code que nous écrivons. Nous devons tous apprendre comment fonctionnent le réseau CSS et le flexbox. Même si votre point fort est JavaScript, avoir une base de connaissances CSS solide est un allié fort lorsque vous exprimez vos idées. Lorsque vous partagez des prototypes de composants, des interactions UX et même des algorithmes dans les bacs de sable en ligne, la façon dont le travail est présenté a un grand impact. Développer les bonnes dispositions - et définir les styles pour les créer - est fondamental.

Faire des dispositions dans CSS ne devrait pas être une tâche intimidante. La grille CSS est en fait très amusante! Par exemple, l'utilisation d'une zone de grille nommée ressemble à dessiner une version art ASCII de la conception sur papier. Créons la disposition de l'application photo, qui affiche principalement les photos et les personnes sur la photo côte à côte, ainsi que l'en-tête, le pied de page et la barre latérale typiques.

 <code>.photos-app { /* 为我们的应用程序布局，让我们将内容放在网格中*/ display: grid; /* 我们想要3 列和3 行，这些是使用`fr`（剩余空间的一部分）的响应式轨道大小*/ grid-template-columns: 20% 1fr 1fr; grid-template-rows: 0.5fr 1.7fr 0.3fr; /* 让我们稍微分开一下轨道*/ gap: 1em; /* 我们现在有3x3 个单元格，这就是每个部分放置的位置*/ grid-template-areas:  "header header header"  /* 顶部行中延伸的页眉*/  "config photos people"  /* 左侧边栏和我们的应用程序内容*/  "footer footer footer"; /* 底部行的页脚 */ } .the-header { /* 在每个部分中，让我们定义我们用来引用区域的名称*/ grid-area: "header"; }</code>

Ce n'est qu'une petite partie de ce que vous pouvez construire avec la grille CSS. Les spécifications sont très flexibles. Les zones peuvent également être placées directement avec des numéros de ligne ou des noms, ou ils peuvent être placés implicitement par le navigateur, et le contenu sera automatiquement distribué dans la grille. Et les spécifications évoluent toujours, ajoutant des fonctionnalités telles que des sous-grilles.

En même temps, l'utilisation de grilles peut être difficile, comme tout ce qui nécessite une nouvelle façon de penser. Il faut beaucoup de temps pour comprendre de telles choses. Et une façon d'aider à le faire est…

Apprenez en jouant

Lors de l'apprentissage de la grille CSS, il est facile d'être intimidé par ses symboles et sa sémantique. Avant de développer une certaine mémoire musculaire, le démarrage du processus d'apprentissage avec des outils visuels et interactifs peut être un excellent moyen de surmonter les craintes précoces. Beaucoup d'entre nous ont utilisé des générateurs lorsqu'ils apprennent à créer des ombres, des gradients, des tables de démarrage, etc. S'ils sont soigneusement construits, les générateurs sont une grande aide à l'apprentissage.

Utilisons la grille Layoutit pour recréer le même design dans notre exemple.

Les générateurs d'ouverture comme la grille Layoutit ne sont pas destinés à dépendre de façon permanente; Ils trempent des pierres. Ce générateur spécifique matérialise votre conception en quelques clics et est livré avec du code correspondant pour vous aider à vivre la puissance de la grille CSS. Cela vous offre le succès précoce dont vous avez besoin pour stimuler le processus d'apprentissage. Pour certains d'entre nous, les générateurs restent en permanence dans notre boîte à outils. Non pas parce que nous ne savons pas comment faire la mise en page à la main, mais parce qu'avoir une boucle de rétroaction visuelle peut nous aider à convertir rapidement les idées en code. Nous continuons donc de les utiliser.

Sarah Drasner a également créé un générateur de grille CSS digne d'attention.

Apprentissage par construction

Leniolabs a récemment ouvert la grille Layoutit et ajouté de nouvelles fonctionnalités telles que la vue de code interactive, l'édition de zones, l'historique et la prise en charge hors ligne. Et il y a plus de fonctionnalités en cours de développement.

Vérifiez-le sur GitHub si vous avez des idées pour améliorer les outils, veuillez nous contacter! Ouvrez une question et discutons-en sur Github. En entrant dans le MetaField, vous pouvez également en savoir plus sur la spécification de la grille CSS en nous aidant à créer des outils.

Nous utilisons cette application pour suivre les meilleures pratiques pour créer des expériences Web interactives interactives haute performance. Il est désormais alimenté par le Vue 3 récemment publié, construit à l'aide de composants, et à l'aide de VITE, un nouvel outil de développement qui ne regroupe pas les applications pendant le développement, ce qui nous permet d'obtenir une rétroaction instantanée pendant le développement. Si vous êtes curieux et que vous souhaitez construire avec nous, débarquez le référentiel et apprenons ensemble!

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!