网站设计正在形成非常类似网格的布局。我们的模块将非常整洁地排列成网格。但是网格不是复杂且奇怪的吗？也许我们应该使用一些花哨的框架？不。它们很容易。我们将在短短几分钟内设置一个简单的网格。这里使用的概念启发了文章 “不要过度思考网格”。
当然，我们在过程中遇到了一些问题（正如你所做的那样）。在这种情况下，我们使用了与我们想要的不匹配的属性选择器。
我们还设置了一个“工具箱”CSS文件，其中将包含通用、可重用且某种程度上全局有用的类。第一个，一如既往，是 清除浮动——一段 CSS，我们可以在不想因其浮动子元素而坍塌的父元素上使用。我们不会将这个工具箱 CSS 作为单独的文件加载，而是将其 @import 到全局文件中。
我们让网格工作起来，但我们仍然需要做一些工作来正确地放置模块并设置间隙。
我并没有得到 Gridset 的报酬来认可他们的产品，但我不得不说，网格布局和覆盖脚本将事物排列得更紧密且以响应式方式排列的能力真是太棒了。
我喜欢从与网格相关的数字或对象开始。如果你没有对象或数字，那就编造一个。15px 的间隙太小了，60px 太大了。保持在 30-40px 之间感觉刚刚好——就像我的粥一样。
查看 Mark Boulton 关于网格的视频系列。
这就是为什么 box-sizing: border-box; 改变我的世界。它使基于百分比的网格不会因添加固定或 px 基于的填充而被破坏。那一天我的生活完整了。
但是，我不同意 Gridset 的观点。虽然我认为它是一个不错的 GUI 和一个巧妙的想法，但我担心的是，如果普通用户或编码新手不理解网格的工作原理或在使用盒模型时需要考虑什么，那就不太好了。
此外——我之前构建了自己的网格框架，以 1140px 网格为灵感，但我可能只使用了 50% 的时间，因为一半的网站在布局等方面非常独特。
我从 Twitter Bootsrap 切换到 Gridset。它太好了。它只给了我一个网格，而且它是我想要的任何东西。
对于所有 Gridset 新手，请确保与 Chris 提到的清除浮动一起使用。
很高兴看到那里的“不要过度设计的网格”……我一直有点害怕那里所有的网格框架。但是，哇，它有多简单！
谢谢
我真的很喜欢“不要过度思考网格”的概念。虽然这只是一个 10 分钟的屏幕录制，但我认为它是最有用的一个。
此外，你将视频托管在 Vimeo 上也很好，它们现在加载速度对我来说快多了。
谢谢！
喜欢到目前为止的屏幕录制，伙计，不过有一个问题，使用
column-count、column-width和column-gap在 CSS3 中难道不更容易吗？例如，可以像这样。或使用简写
并将其添加到
section？这样浏览器就会为你完成工作，并且不需要任何数学计算。我猜这在 ltIE10 中会惨败，但谁在乎呢 :)在本系列的后面，我们将针对图库使用 CSS3 列，因此请查看以了解其工作原理。
我认为 CSS3 列适用于文本和简单内容，而不是真正用于布局。例如，你不能只是说“我想把这个东西放在第三列”——你没有这个选择。事物只是根据流向第三列流动。这对于大多数设计来说都不起作用。
说得对，在进一步尝试之后，我发现它们有点局限性，并且流向在边框方面有一些怪癖，它们流到了我不想要的地方……
谢谢你，欧比旺，这个见习武士还有很多东西要学习。
Chris，很棒的视频！
大约在 4:31 处，你写了 [class^=’grid-‘] { /* some code*/ }。我是一个新手，以前从未见过这种情况。这种类型的类选择是 Sass 中内置的东西吗？我有限的代码查看经验让我相信这种语法仅用于选择“以…开头”、“包含”等的_属性_，而不是具有特定类或 ID 名称的元素。
谢谢！
[class^=’grid-‘] { /* some code*/}
这个选择器用英语表示：“选择类属性以‘grid-‘开头的元素。”
它与类选择器具有相同的特异性，因此它只是一个快捷方式，这样你就不必像这样操作
你可以这样做
并获得两者，因为它们都以相同的方式开头。不过它_可能_过于聪明了。现在的 Chris 更倾向于使用实际的类名。部分原因是，这样一来，无论你在元素上如何排序类名，它都不会有影响，就像你使用“以…开头”时那样。你也可以使用
*=来表示“包含”——但它也有一些脆弱性。