网格也用于印刷，但就本文而言，我主要想讨论一下PC移动设备上的网格系统设计。内容块包含文本、照片或两者的组合。事实上，背景色不能被视为内容元素，除非它是文本或图片的容器。

　　画板边缘应设计完全出血的元素或线性图形，并理解为出血的网格。这是一个例外。当背景色或照片完全出血时，开发人员会将其理解为全屏内容元素。如果设计是为了装饰元素和其他内容，它可以被切断。此时，它也可以脱离网格设计。页眉和页脚有时也有例外。它们不被认为是内容的一部分。一些设计将其固定在浏览器的边缘，而另一些设计则根据其自身的功能和内容，喜欢保持内容的总宽度。保持内容总宽度的优点是，当用户在宽屏显示器上查看页面时，他们不需要来回扫描;将它们固定在浏览器上的优点是它们可以为导航元素提供更多的空间。

　　内容元素必须在几列中

　　它的核心思想是内容元素必须位于几列，你可以随意分割，比如6×2,3×4,4×3.在下面的例子中，我展示了不同分割方法设计的信息卡。如果我们把所有的内容都放在网格上，文本内容就会显得很长。好的位置在任何网格上都不严格，这也是可能的。只要我们理解整个元素实际上是一个看不见的大容器。所以如果有人说“我需要一个1200px宽的设计”这并不意味着你的设计是1200px宽，这实际上是说设计内容总宽1200px在画板中，实际内容占位是960px，这样就会有空间留出外边距。

　　如何实现响应式布局?

　　在传统的网格化系统设计中，列的总宽度和水槽的总宽度保持不变，但列的总宽度保持不变“数量”产生变化。为什么要这样做?这是为了使设计更简单。如果一组三张卡片放在桌面的四列上，两张卡片将显示在平板电脑上，第三张卡将折叠在第二行上。没有必要做出任何调整，因为我们已经知道它位于第四列。在手机上，答案也很简单。您只需要一张卡片，其他卡片将自动堆放在下面的行中。如果你愿意，你也可以变得有创意。选择只在手机上显示一张卡片或进行水平滚动。这些列的适应性是代码的一个非常简单的参考。

　　事实上，web任何浏览器的总宽度必须呈现。例如，有一个大显示器，它可以看到1600像素宽的东西，事实上，pc网页设计1200px宽，平板电脑是768px宽，手机是360px宽。所以你会看到一个低于1200的px有很多空白。但是当你的浏览器有一个更小的像素，1199px，会发生什么?

　　固定网格

　　如果在开发中写了一个固定网格，当你从桌面缩小到平板电脑时，就像900px当浏览器总是宽的时候，你看不到任何变化，设计就像被剪掉了一样。但是当达到768px在临界点，设计会立即改变，平板电脑上的显示效果会更好。如果这个值继续降低，同样的事情也会发生。在达到另一个临界点之前，设计看起来是一样的。

　　流动网格

　　现在让我们来看看移动网格的特点。当窗口缩小时，内容会动态变化，文本会改变，元素会变窄。然而，在内容总宽度缩小到下一个临界点之前，这些元素的布局不会改变。

　　因此，我想说的是，设计的临界点只是改变布局的参考点。这就是为什么网格中的列宽和水槽不会改变，因为我们希望设计师在考虑布局时更容易建立一致性。