Layoutit 网格 是一个交互式的 开源 CSS 网格生成器。它允许您绘制设计并在过程中查看代码。您可以与代码交互，添加或删除轨道线并拖动它们来更改大小——并且您可以实时查看 CSS 和 HTML 的变化！
完成布局后，您可以创建一个 CodePen 或获取代码来启动您的下一个项目。该工具将代码置于首位，帮助您在直接使用代码时学习 CSS 网格。
CSS 网格是思考布局的一种全新方式
现在我们可以为我们的网络体验创建强大的响应式布局。我们终于可以学习使用一套连贯的布局工具进行设计，而不是记住一堆用于强制元素定位的技巧。
现在，我并不是说这样的生成器可以让我们免于了解我们编写的代码。我们都应该学习 CSS 网格 和 Flexbox 的工作原理。即使您的强项是 JavaScript，在 CSS 知识方面拥有坚实的基础也是在传达您的想法时强大的盟友。在为组件、UX 交互甚至在线沙箱中的算法共享原型时，您工作呈现的方式会产生很大的影响。开发合适的布局——并定义创建它们的样式——是基础。
在 CSS 中制作布局不应该是令人生畏的任务。CSS 网格实际上非常有趣！例如，使用 命名网格区域 感觉就像在纸上绘制设计的 ASCII 艺术版本。让我们创建照片应用程序的布局，其主要内容是图片和其中人物的提要并排放置，以及典型的页眉、页脚和配置侧边栏。
.photos-app {
/* For our app layout, lets place things in a grid */
display: grid;
/* We want 3 columns and 3 rows, and these are the responsive
track sizes using `fr` (fraction of the remaining space) */
grid-template-columns: 20% 1fr 1fr;
grid-template-rows: 0.5fr 1.7fr 0.3fr;
/* Let's separate our tracks a bit */
gap: 1em;
/* We now have 3x3 cells, here is where each section is placed */
grid-template-areas:
"header header header" /* a header stretching in the top row */
"config photos people" /* a left sidebar, and our app content */
"footer footer footer"; /* and a footer along the bottom row */
}
.the-header {
/* In each section, let's define the name we use to refence the area */
grid-area: "header";
}这只是您可以使用 CSS 网格构建内容的一小部分。规范非常灵活。区域也可以使用行号或名称直接放置，或者可以由浏览器隐式放置，内容会自动分布在网格内。并且 规范 继续随着新增功能（例如 子网格）而发展。
同时，使用网格可能很困难，就像任何需要新的思维方式的事情一样。我们需要花费大量时间才能理解这类事物。而帮助我们做到这一点的一种方法是……
边玩边学
在学习 CSS 网格时，很容易被其表示法和语义吓倒。在您养成一些肌肉记忆之前，使用视觉和交互式工具启动学习过程可以成为克服早期恐惧的绝佳方法。我们很多人在学习如何创建 阴影、渐变、Markdown 表格 等时都使用过生成器。如果精心构建，生成器是很好的学习辅助工具。
让我们使用 Layoutit 网格 在我们的示例中重新创建相同的设计。
这样的生成器并非旨在永远依赖；它们是垫脚石。这个特定的生成器可以帮助您体验 CSS 网格的功能，只需点击几下即可实现您的设计，并提供相应的代码。这为您提供了继续学习过程所需的早期成功。对于我们中的一些人来说，生成器会永久保留在我们的工具箱中。并不是因为我们不知道如何手动制作布局，而是因为拥有视觉反馈循环可以帮助我们快速将想法转换为代码。所以我们继续使用它们。
Sarah Drasner 还创建了一个 CSS 网格生成器，也值得一试。
边构建边学习
Leniolabs 最近 开源了 Layoutit 网格 并添加了新功能，例如交互式代码视图、区域编辑、历史记录和离线支持。并且还有更多功能正在开发中。
如果您有改进该工具的想法，请与我们联系！打开一个问题 并在 GitHub 上讨论它。进入元领域，您还可以通过帮助我们构建工具来了解 CSS 网格规范。
我们使用该应用程序跟踪创建 高性能 交互式网络体验的最佳实践。它现在由 新发布的 Vue 3 提供支持，使用 <script setup> 组件构建，并使用 Vite，这是一种新的开发工具，它 在开发过程中不会捆绑应用程序，这使我们在开发过程中获得了即时反馈。如果您好奇并想与我们一起构建，请分叉存储库，让我们一起学习！