Layoutit网格：通过发电机视觉学习CSS网格

Layoutit Grid 是一款交互式的开源 CSS Grid 生成器。它允许您绘制设计并在过程中查看代码。您可以与代码交互，添加或删除轨道线并拖动它们来更改大小——您会实时看到 CSS 和 HTML 的变化！

完成布局后，您可以创建 CodePen 或获取代码来启动您的下一个项目。该工具将代码置于首位，帮助您在直接使用 CSS Grid 的过程中学习它。

CSS Grid：一种全新的布局思维方式

我们现在可以为我们的 Web 体验创建强大的响应式布局。我们终于可以学习使用一套连贯的布局工具进行设计，而不是死记硬背一堆技巧来强制元素定位。

当然，这并不是说这样的生成器可以让我们不必了解我们编写的代码。我们都应该学习 CSS Grid 和 Flexbox 的工作原理。即使您的强项是 JavaScript，拥有扎实的 CSS 知识基础在表达您的想法时也是一个强大的盟友。在在线沙箱中共享组件原型、UX 交互甚至算法时，工作呈现方式会产生很大影响。开发合适的布局——并定义创建它们的样式——是基础性的。

在 CSS 中制作布局不应该是令人畏惧的任务。CSS Grid 实际上非常有趣！例如，使用命名网格区域感觉就像在纸上绘制设计的 ASCII 艺术版本。让我们创建照片应用程序的布局，其主要内容是并排显示照片和照片中的人物，以及典型的页眉、页脚和配置侧边栏。

<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>

这只是您可以使用 CSS Grid 构建内容的一小部分。规范非常灵活。区域也可以直接使用行号或名称来放置，或者可以由浏览器隐式放置，内容会自动分布在网格内。并且规范还在不断发展，增加了诸如子网格之类的功能。

与此同时，使用网格可能很困难，就像任何需要新思维方式的事情一样。理解这类事情需要大量时间。而帮助做到这一点的一种方法是……

边玩边学

学习 CSS Grid 时，很容易被它的符号和语义吓倒。在您养成一些肌肉记忆之前，使用视觉和交互式工具启动学习过程可以成为克服早期恐惧的绝佳方法。我们很多人在学习如何创建阴影、渐变、Markdown 表格等等时都使用过生成器。如果精心构建，生成器是很好的学习辅助工具。

让我们使用 Layoutit Grid 来重新创建我们示例中的相同设计。

打开 Layoutit Grid 这样的生成器并非旨在永久依赖；它们是垫脚石。这个特定的生成器通过几次点击将您的设计具体化，并附带相应的代码，帮助您体验 CSS Grid 的强大功能。这为您提供了推动学习过程所需的早期成功。对我们中的一些人来说，生成器会永久保留在我们的工具箱中。不是因为我们不知道如何手工制作布局，而是因为拥有视觉反馈循环可以帮助我们快速将想法转换为代码。所以我们继续使用它们。

Sarah Drasner 还创建了一个值得关注的 CSS Grid 生成器。

通过构建学习

Leniolabs 最近开源了 Layoutit Grid 并添加了新功能，例如交互式代码视图、区域编辑、历史记录和离线支持。并且还有更多功能正在开发中。

在 GitHub 上查看如果您有改进工具的想法，请与我们联系！打开一个问题，让我们在 GitHub 上讨论它。进入元领域，您还可以通过帮助我们构建工具来了解 CSS Grid 规范。

我们使用该应用程序来跟踪创建高性能交互式 Web 体验的最佳实践。它现在由新发布的 Vue 3 驱动，使用组件构建，并使用 Vite（一种新的开发工具，在开发过程中不会捆绑应用程序），这使我们在开发过程中能够获得即时反馈。如果您感到好奇并想与我们一起构建，请分叉存储库，让我们一起学习！

以上是Layoutit网格：通过发电机视觉学习CSS网格的详细内容。更多信息请关注PHP中文网其他相关文章！