这是一个使用CSS Grid的布局和模式的入门模板集合。这里的想法是展示该技术能够做什么，并提供一个可以重新用于其他项目的起点。
请记住，Grid 的浏览器支持良好，但需要为旧版浏览器提供回退。这意味着直接复制粘贴这些内容可能不适合某些用例。
圣杯布局
经典的三栏布局，其中两侧边栏和包含正文内容的容器夹在全宽的页眉和页脚之间。
灵活的圣杯布局
当视口宽度发生变化时，所有内容都保持完整，使用流体内容容器。
查看 CodePen 上 Geoff Graham (@geoffgraham) 的作品 CSS Grid – Holy Grail 2。
响应式圣杯布局
当视口变窄时，内容会堆叠起来。
查看 CodePen 上 Geoff Graham (@geoffgraham) 的作品 CSS Grid: Holy Grail Layout – Responsive。
带页眉和页脚的 2 列布局
经典的博客布局，其中一列用于文章，另一列用于侧边栏。
灵活的 2 列布局
当视口变窄时，布局会变得紧凑，但布局保持不变。
查看 CodePen 上 Geoff Graham (@geoffgraham) 的作品 CSS Grid: Header, Footer with 2-Column (Flexible)。
响应式 2 列布局
在较小的屏幕上，内容会堆叠起来。
查看 CodePen 上 Geoff Graham (@geoffgraham) 的作品 CSS Grid: Header, Footer with 2-Column (Responsive)。
均匀分布，根据需要调整大小
元素流入布局，并在没有更多元素时结束。
查看 CodePen 上 Geoff Graham (@geoffgraham) 的作品 CSS Grid Evenly Distributed, As Many As Needed。
带突显的文章
Tyler Sticka 提供了一个很棒的小技巧，可以让元素跳出网格。Rachel Andrew 提供了关于命名网格线如何实现此功能的详细解释。
查看 CodePen 上 Geoff Graham (@geoffgraham) 的作品 CSS Grid: Article with Breakout。
大富翁棋盘
游戏棋盘的简单再现。Jen Simmons 有一个精彩的演示，包括大富翁风格。
查看 CodePen 上 Geoff Graham (@geoffgraham) 的作品 CSS Grid: Monopoly Board。
太棒了
太棒了……我爱上了 CSS Grid
非常有帮助。谢谢！
这绝对是天才之作。感谢你的分享。我使用网格大约 6 个月了，但只在最基本的用例和非常复杂的用例中使用。这些都是很好的例子，可以演示网格的一些更模糊但非常有用的功能。
我必须承认，我花了几个月的时间才克服我对 Flexbox 的迷恋，才真正喜欢上 Grid，但这值得。（当然，在 Grid 可以完美替代 Flexbox 的地方）
*”…以及很少的复杂用例。”（打字速度太快，脑子跟不上了）
当然，谢谢 Vanderson！很高兴你发现这些内容有用，而且我很乐意听到你开始喜欢上 Grid。这绝对是 CSS 中一个真正有趣和激动人心的时刻。
是的，这就是问题所在。Flexbox 仍然非常适合一维布局（列或行），而 Grid 则是任何二维布局（列和行）的最佳选择。
我对 CSS Grid 也非常感兴趣，并且看到你正在使用它。你是否遇到过浏览器兼容性问题？因为我们仍然处于从旧方法（Flexbox/bootstrap）到新方法（CSS Grid 全程，宝贝！）的过渡阶段，我一直犹豫是否使用它，因为浏览器存在困难（尤其是移动浏览器采用率）。
你的体验如何？
所有这些示例 Grid 布局让我困惑的一点是，行几乎总是以物理量（px、vh 等）设置，这对我来说没有意义，因为行显然需要扩展以适应像普通网页一样的内容（我相信网格不会扩展行高，除非另有说明）。我知道您可以轻松地解决这个问题，并为行大小使用“auto”，但在这些示例中并不常用。
就像过去糟糕的固定高度框一样。基本上，实用示例会比固定大小的示例更好 :)
不过我意识到这只是一个小小的问题
我在 codepens 中做了一些修改，我怀疑高度是为了让示例在本文中看起来更好，并在小空间内易于阅读。
我同意，我永远不会*在类似这样的东西上使用强制高度。尤其是在响应式设计需求下，这会搞砸一切。
*当然，总有一些边缘用例。:P
哦，是的，当然。这里的所有内容都纯粹是为了举例说明，否则将没有内容可以显示来说明这些概念。
重申开头
我只是愚蠢还是不能只使用 min()、max() 和 clamp() 的组合来设置字体大小的限制？
你完全可以！这篇文章最初是在这些函数得到广泛支持之前撰写的。关于其工作原理的更多信息在这篇文章中。
有用。感谢你提供的布局，Graham 先生。
感谢这篇文章和模板。CSS Grid 正在成为我几乎所有项目的首选。
非常有帮助，谢谢！
我也很好奇在哪里可以找到更多关于你为响应式字体大小创建的计算信息？ :)
嗨，Stephanie！很高兴这些入门模板对你有帮助。 :)
以下是对这些演示中使用的流体排版进行了完整描述
太棒了！我可以将这些添加到我自己的自制助手/指南集中供自己使用吗？（此处作为参考：http://janzheng.com/stylecoeur/styleguide.html）
当然，尽管添加！取走任何你认为有用的东西。 :)
你的突显部分有一个针对 fogure 元素的规则，但我没有在标记中看到它……是打字错误吗？
这确实是一个真实的错别字。感谢你的提醒！
这太棒了。
非常好。但我有一个问题：为什么不简单地使用一个简单的表格来创建日历呢？
你当然可以！通常有多种方法可以完成同一件事，表格是一种合法的方法。但这是一个 Grid 示例的集合，而不是表格。 :)
太棒了！谢谢 Geoff :)
我是一名正在培训的网页开发人员（快完成了）。
我昨天早上开始尝试使用 grid，到当天结束时，我只使用了 grid。更容易理解和使用。我主要会使用 grid，因为有你以及另一个网站的帮助。
我开始使用 grid，但我似乎找不到如何为固定布局设置全宽背景颜色。
嗯，不确定那里可能发生了什么。你有演示吗？无论布局是固定的还是非固定的，全背景颜色都应该是可能的：https://codepen.io/geoffgraham/pen/PRxEEd
对于像我这样的初学者来说，这是一篇非常有用的文章。
谢谢 Geoff Graham
不错的汇编。谢谢！
日历很漂亮。
非常感谢！
嗨，Geoff！过去一周我一直在努力学习 grid。我一直在非常仔细地观察每月混排网格布局，但无法弄清楚你是如何保持行高和列宽之间的关系的（或者你是使用断点了吗？）。我的意思是，我知道你肯定设置了一些断点，但仍然有一些专业的东西我不理解。你能帮我一下吗？我想在我的网站上实现像你一样漂亮的效果。谢谢！！
嗨，Luke！我希望我能为每月混排布局的功劳，但那都是 Chris 的成果。 :)
看起来它在 800px 断点处开始变成网格，该断点是在父元素上设置的。它实际上被设置为一个六列网格（`grid-template-columns: repeat(6, 1fr);`），然后所有子元素都沿着列放置（例如，第一列网格的 `grid-column: 1 / 2`）以及网格创建的隐式行上（例如，第二行的 `grid-column: 2 / 3`）。
这样，就不需要真正的断点了！网格从 800px 及以上的断点处理间距和放置。
Geoff Graham，你在这里写的东西绝对是无价之宝。我简直不敢相信这篇文章只是免费存在于这里！它太有价值了！这就像初级开发人员完美主义者（像我这样）的梦想成真。总之，我只是想衷心感谢你在这里创造了这份美丽。♥️
你可以使用 `:first-letter` 伪元素来设置响应式日历的样式，同时保留 title="Sunday" 等，这样在鼠标悬停时可以看到整个日历日期。
ul.weekdays li abbr:first-letter {
font-size:calc(16px + (26 – 16) * ((100vw – 300px) / (1600 – 300)));
}
真聪明！
谢谢。在我的网站上使用了这个，该网站也托管在 digitalocean 上。