60gs 中文文档教程

Question

60 Columns Grid System

60 网格系统是 CSS 网格的初始网格。

---

什么是 60 网格系统？

60 网格系统是 CSS 网格的入门网格。

它只是一个 CSS 类。

让我给你看代码：

.grid {
          display: grid;
          grid-template-columns: repeat(60, 1fr)
        }

就是这个？ 你一定是在开玩笑！？ 这是某种黑魔法吗？

我会在一分钟内告诉你它的黑暗秘密。 给我一个解释的机会。

为什么是 60 列？

60 是第一个可被 2、3、4、5 和 6 整除的数字。

那又怎样？

这是使用 CSS Grid 制作等宽 1-6 列网格的最简单方法。

我说的是这张图片：

嗯..我持怀疑态度对这个？

在过去，960px 是一个神奇的数字，可以被 2、3、4、5 和 6 整除。你们过去可能都使用过 960px 布局。

60 网格系统通过制作 60 个更小的单元来完成 1 - 6 列的相同操作。 加上是灵活的。

它适用于任何宽度：

.grid {
   width: 1237px / 83% / 40rem /* random numbers */
   display: grid;
   grid-template-columns: repeat(60, 1fr)
}

您还可以添加网格间隙：

.grid {
   width: 1237px / 83% / 40rem /* random numbers */
   display: grid;
   grid-gap: 10px; /* random number */
   grid-template-columns: repeat(60, 1fr)
}

我不明白？ 如何添加列？ 我喜欢制作自己的语义 HTML5 友好布局，我不想使用任何框架。

你可以。 制作自己的 ID 和课程。

我喜欢 Header、Footer、Sidebar 的经典布局，我该怎么做？

嗯，没有人再这样做了，但你是老板。

你可能想要这样的东西：

#header, #footer { grid-column: 1 / 61 }
#sidebar {  grid-column: 1 / 17 }
#article { grid-column: 17 / 61 }

这是演示

我还是不明白 1 / 17 和 17 / 61 ？

你确定你知道 CSS 网格！？ 先去学习CSS Grid，稍后再回来。

是的，我还在学习 Flexbox.. 现在是 CSS Grid。 过去的生活更轻松。

我听到了，兄弟。

我回来了。 所以我可以使用我自己的命名系统添加我自己的自定义列吗？

是的，一点没错。

我只需要指定网格列从 1 到 61，对吗？

对，就是这样。

重叠的列呢？

重叠栏 .. 啊，你就是那个看过关于重叠栏的视频的人，你想用 HTML 和 CSS 制作多层海报。 当然你也可以做重叠的列。 示例（1 到 23 和 17 到 30 ......）只是重叠数字。

我不喜欢制作页眉、页脚 ID。 我们1996年是什么？ 我可以做一些像 OOP CSS 这样更现代的东西吗？

最后是一些好问题。 我们可以！

使用 CSS 网格，我们可以像这样合并列：

.col-30 { grid-column-end: span 30 }  /* 2 columns */
.col-20 { grid-column-end: span 20 } /* 3 columns */

<div class=“col-30”> 50% </div>
<div class=“col-30”> 50% </div>

<div class=“col-30”> 33.33% </div>
<div class=“col-30”> 33.33% </div>
<div class=“col-30”> 33.33% </div>

啊哈，所以 30 + 30 = 60 意味着 50% 和 50% 列很重要吗？

是的。

我可以用 Sass 吗？

是的，我构建了一些 Sass。 去检查 60gs.scss 文件。

它有反应吗？

可以，我已经在 60gs.css 文件中做了一些基本的响应，添加更多功能是你的任务。

现在是一些棘手的问题：我可以在一行中有 7 个相同的列吗？

不，谁做 7 列！？ 甚至瑞克和莫蒂的网格中也没有 7 列！ 瑞克是宇宙中最聪明的人。

但是设计师做了7列网格，不知如何是好？

解雇设计师。

但说真的，我需要 7 列？

好吧.. .grid7{ grid-template-columns: repeat(7, 1fr) } .somename{grid-column-end: span 1} 并将 grid7 放入网格中。 像 Matrix 或 Inception。

11 列呢？

你知道玩俄罗斯轮盘吗.. 玩了 11 次.. 问题解决了 :)

我玩了 11 次你现在能告诉我解决方法吗？

嗯..你很幸运……是的，你需要像 7 列一样做同样的事情。

每个人都.. CSS 网格是下一件大事.. 现在我需要有 60 列，这样我才能有 6 列？

给猫剥皮的方法不止一种，请使用最适合您的解决方案。

浏览器兼容性如何？

首先，了解你的客户。 如果您的客户是像我这样的人并且您没有问题..否则就顺其自然-> 漂浮。

所以基本上 60 gs 就像 960px 网格但仅适用于 CSS 网格？

是的，但是 60 gs 可以取任何值，而不仅仅是 960px，并且更加灵活和流畅，而且非常容易制作网格间隙。

谢谢，我可能会坚持使用 Flexbox。

PS啊，你还在这里。 你想知道 NPM 命令在哪里.. 抱歉你更喜欢 yarn。 你没读到 npm 是 new yarn 吗？ 啊哈，你最近使用 web-pack。 你可以只复制粘贴，它只是一个 CSS 类。

开个玩笑 npm 我也爱你 :)

$ npm i ...