10 个方便的 CSS 网格代码片段

CSS 网格规范并不完全是“新的”，但它在主流开发世界中绝对是更新的。 许多前端程序员甚至还不知道 CSS 网格属性，更不用说它们如何应用于界面了。

您可以通过四处搜索找到大量教程，但我也建议您学习代码片段。 通过这种方式，您可以深入到真实世界的项目中，这样您就可以看到 CSS 网格在实时网页上是如何工作的。

这个集合应该提供大量资源来帮助您学习、自定义和重新设计 CSS 网格，以适应您在 Web 上所做的任何事情。

1.多图英雄块

让我们从这个带有网格属性的非常酷的英雄块开始。 这种设计模仿了许多杂志风格网站上的主页英雄形象部分。

开发人员 Rachel Andrew 使用她自己项目中的一些自定义 CSS 创建了这个。 它工作得非常好，并且设计完全响应启动。

更不用说它在移动屏幕上看起来很棒了。 不是您在大图像块中总能找到的东西。

这是学习 CSS 网格的绝佳资源，也是编写杂志风格博客主题的任何人的方便片段。

2. CSS 网格布局

grid-auto-flow 属性在此演示中使用“密集”设置完全显示。 当网格调整大小时，这会强制项目在页面中进一步向下挤压。

使用此设置，您可以对哪些页面元素更改位置、这些更改发生的位置以及网格应如何响应进行大量控制。 这比主要用于响应式设计的媒体查询更重要。

如果您不确定此代码的作用，请记住：Google 是您的朋友！ 许多很棒的帖子和堆栈溢出线程涵盖了整个设置。

3. 不那么吓人的南瓜事实

这是一个非常酷的片段，由一些基本的南瓜事实创建。 好吧，南瓜事实由 CSS 网格布局组织。

该代码实际上是在 SCSS/Sass 上运行的，这意味着您需要熟悉该语言才能深入研究。但是如果您想查看基本属性，也可以在 CodePen 内将 Sass 代码编译为原始 CSS。

关于这个设计，我最喜欢的事情之一是颜色和排版。 它真的用南瓜图标和所有那些黄色/橙色色调尖叫万圣节。

4.自动六边形布局

这可能是我为这个画廊找到的最实用的项目之一。 查看此网格样式并尝试调整浏览器的大小。

您会注意到六角形项目重新格式化以相应地适应页面。 这可能是处理包含大量照片的复杂页面的最佳方式。 我经常在会议网站和拥有大量员工的公司的“关于我们”页面上看到这种布局。

现在有了 CSS 网格结构，您无需担心手动响应样式。 这个代码片段是开始规划类似布局的最佳起点。

5. CSS Grid 中的 Pokedex

我还没有在 CSS 网格中看到像这个 Pokedex 这样有创意的东西。 它依赖于 HTML 和 CSS 以及一些 JavaScript 来自动填充单元格大小。

当您调整页面大小时，您会注意到图形本身的大小也会增加。 这使用 CSS 非常容易处理，一旦您了解了一些网格属性，它就更容易了。

请注意，这不是交互式的，因此您无法单击任何内容或打开新页面。 但是在布局基础一成不变的情况下，添加这些功能将非常简单。

6.简单的网格

这是一个非常有趣的想法，它将印刷设计风格带到了网络上。 在 CodePen 上查看这个示例，其中包含许多带有标题和超大字体的列。

网格布局本身依赖于具有预定义间隙的设置列。 这意味着当您调整浏览器大小时，某些列会根据这些规则分解。

这是确保某些列始终彼此相邻出现或至少出现在视图中的绝佳方式，因此它们易于阅读。

7. 带有 Flexbox 后备的 CSS 网格

并非所有浏览器都赶上了 CSS 网格结构。 这就是为什么这个片段教你如何使用 flexbox（和浮动）作为后备设计自定义 CSS 网格。

这实际上很棘手，因为如果网格属性受支持，您想使用它们，但如果不支持，您希望浏览器忽略它们。 值得庆幸的是，代码注释很好，因此您可以深入研究甚至尝试自己调整一些功能。

我不会称这是一个完美的后备解决方案，但它绝对比没有好。

8. 网格术语演示

不确定所有这些令人困惑的 CSS 网格术语？ 然后这个片段可能有助于清除问题。

如果您深入研究此示例，您会发现一些突出显示的功能以及沿途解释网格的文章。 您还将学习如何正确查看网格线以及如何在页面上准确查看 CSS 网格。

请注意，您不会从这个演示中收集到所有内容，因为它没有涵盖所有内容。 这只是对最简单的属性的一个小介绍，并带有视觉辅助工具来提供帮助。

9. 使用网格模板列：repeat()

有关 grid-template-columns 属性的一个非常具体的示例，请查看此现场演示。 它向您展示了如何使用重复功能，而不是在 CSS 中多次声明相同的列值。

同样，浏览器支持仍在赶上这一点，但大多数现代 Web 浏览器都使用这种技术。

更不用说您会在 CSS 中找到大量注释来帮助您理解它的作用。

10.纯CSS网格填字游戏

最后看看 Adrian Roworth 的纯 CSS 填字游戏。 整个布局仅基于 HTML 和 CSS 代码，特别是布局结构的 CSS 网格属性。

更疯狂的是，您可以在填字框中输入内容来真正解决难题。 多么酷啊！

请注意，这件事非常复杂，它是此处列出的少数不适合移动设备的项目之一。 但这证明了我们在网络上的网格布局已经走了多远，所以我希望在不久的将来我们会看到更多这样的东西。