使用免费工具 CSS Grid Generator 学习如何使用 CSS Grid。
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
作为一名从事 Web 应用开发近 20 年的人，我什么都见过了。我最初使用 FrontPage，后来转到 Dreamweaver，学会了在表格中嵌套表格，也掌握了浮动和清除等各种技巧，解决了所有问题。
虽然我的书架上不会出现任何获奖作品，但我确实能创作出一些非常漂亮、简洁明了的版面设计。话虽如此，我其实从来都不喜欢做版面设计，因为它总是让人头疼不已。我总感觉自己像是在胡乱修改，直到版面看起来勉强符合我的预期为止。
这就是为什么当CSS Grid和Flexbox这类工具出现时，我对它们带来的简洁布局的可能性感到无比兴奋。我认为，将这两种技术与 JavaScript 的飞速发展结合起来，正是如今让我对前端开发充满热情的原因。
虽然我现在对 CSS Grid 的理解已经相当透彻了，但我知道入门可能会有点摸不着头脑。所以我很高兴能和大家分享一个我最近发现的新工具，我觉得它真的能帮到正在学习 CSS Grid 的你。
Sarah Drasner 的 CSS 网格生成器
CSS Grid Generator是一款由才华横溢的Sarah Drasner开发的免费工具。它是一款可视化设计工具，可以让你创建基本的网格布局，然后复制用于创建该布局的代码。首次打开该工具时，你会看到一个默认布局，但之后你可以轻松地根据需要自定义布局。
CSS 网格布局示例
当我学习新事物时，我发现最好的学习方法就是用我新买的工具动手做一些实际的东西。在本文中，你将使用一个非常简单的布局，然后使用 CSS 网格生成器生成在实际项目中使用的代码。这是最终的布局，并添加了一些样式，使每个部分都清晰可见。
既然您已经了解了我们的目标，我们就可以开始构建布局了。首先，请将右侧更新为以下内容。
- 列数：4
- 行数：3
- 列间距：20
- 行间距：20
这些间距可以让我们在内容之间留出一些空白。我本来可以直接使用列间距，但我想要在页眉之后和页脚之前留出一些空白，所以就使用了行间距。
接下来，你需要定义应用程序的不同区域。在 CSS 网格生成器中，你可以点击并拖动来创建区域。你希望页眉占据整个网格，侧边栏占据一个单元格，主要内容区域占据两列，页脚占据四列。如果一切操作正确，最终效果应该如下图所示。
这看起来越来越像我们的布局了，但您还需要定义一些不同元素的大小。您会注意到每行和每列旁边都有一个输入框，您可以使用它们来设置具体尺寸。
- 头部：高度 100 像素
- 侧边栏：宽度 200 像素
- 页脚：高度 50 像素
这看起来越来越像我们想要的布局了，但你可能会问那1fr是什么单元。
轨道可以使用任何长度单位定义。网格还引入了一种额外的长度单位，以帮助我们创建灵活的网格轨道。新的 fr 单位表示网格容器中可用空间的一部分。
第二行中的`<div>`1fr会指示该区域占据剩余的可用空间。如果将容器设置为 `<div>`，100vh则可以使内容占据整个页面，列也是如此。
CSS Grid 生成的代码
如果您查看右侧的列和行输入框下方，会看到一个写着“请给我一些代码”的按钮，点击它。您应该会看到一些生成的代码，类似于这样。点击复制按钮复制代码，然后打开文本编辑器。
.parent {
display: grid;
grid-template-columns: 200px 1fr 1fr 200px;
grid-template-rows: 100px 1fr 50px;
grid-column-gap: 20px;
grid-row-gap: 20px;
.div1 { grid-area: 1 / 1 / 2 / 5; }
.div2 { grid-area: 2 / 1 / 3 / 2; }
.div3 { grid-area: 2 / 2 / 3 / 4; }
.div4 { grid-area: 2 / 4 / 3 / 5; }
.div5 { grid-area: 3 / 1 / 4 / 5; }
}
创建一个新文档simple-layout.htm，并添加以下代码，该代码将重置 body 的边距和内边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Layout</title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
接下来添加 CSS（复制的代码原本是 SASS 格式，但你可以把 div 元素提取出来）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Layout</title>
<style>
body {
margin: 0;
padding: 0;
}
.parent {
display: grid;
grid-template-columns: 200px 1fr 1fr 200px;
grid-template-rows: 100px 1fr 50px;
grid-column-gap: 20px;
grid-row-gap: 20px;
height: 100vh;
}
.div1 {
grid-area: 1 / 1 / 2 / 5;
}
.div2 {
grid-area: 2 / 1 / 3 / 2;
}
.div3 {
grid-area: 2 / 2 / 3 / 4;
}
.div4 {
grid-area: 2 / 4 / 3 / 5;
}
.div5 {
grid-area: 3 / 1 / 4 / 5;
}
</style>
</head>
<body>
</body>
</html>
该工具提供的是创建此布局所需的 CSS 代码。您需要添加必要的标记，从 CSS 代码来看，它只是一个.parent包含 5 个.div嵌套元素的 `<div>` 标签。我添加文本只是为了让您能够看到每个部分。
<body>
<div class="parent">
<div class="div1">
Header
</div>
<div class="div2">
Left Sidebar
</div>
<div class="div3">
Main Content
</div>
<div class="div4">
Right Sidebar
</div>
<div class="div5">
Footer
</div>
</div>
</body>
最后添加以下 CSS 代码，该代码会为页面添加一些内边距和背景颜色.div1。.div5
div:not(.parent) {
padding: 10px;
background-color: rgb(199, 199, 199);
}
如果你运行这段代码，你会得到以下结果。
这看起来不错，但你想让它占据整个浏览器窗口。一个简单的解决方法是height: 100vh向.parent类中添加属性。
.parent {
display: grid;
grid-template-columns: 200px 1fr 1fr 200px;
grid-template-rows: 100px 1fr 50px;
grid-column-gap: 20px;
grid-row-gap: 20px;
height: 100vh;
}
这样，你就得到了你想要的布局！
这个工具旨在帮助您快速创建基本的 CSS Grid 布局。接下来，您需要自行深入学习 CSS Grid，才能开始自定义和创建更高级的布局。
结论
CSS Grid Generator 的用户界面美观、简洁且易于使用。我非常喜欢这个项目完全使用 Vue 编写并托管在Netlify上，这两项都是我最喜欢的技术。
如果你好奇这类项目是如何构建的，可以打开源代码看看（谢谢 Sarah！）。右上角有一个漂亮的 SVG 动画，点击即可访问GitHub 代码库。希望你和我一样觉得这个工具很有用……
祝你编程愉快，
丹
本文最初发表于我的博客https://www.danvega.dev/blog。如果您觉得这篇文章有趣，请考虑订阅我的新闻邮件或在Twitter上关注我。
文章来源：https://dev.to/therealdanvega/learn-how-to-use-css-grid-with-a-free-tool-css-grid-generator-26lm