因此，您从未使用网格布局进行设计，但您想开始这样做。伟大的！网格是设计师最好的朋友，是一种结构，可以作为一个框架，你可以随时依赖它。

正如您所说，您已经了解了网格背后的缩放和想法。但是网格布局要多得多，我会说它非常值得学习。

几年前，我不知道如何在我的设计（印刷品或网页）中使用网格布局，但后来我偶然发现了一位伟大的平面设计师John McWade先生的教诲。他是Before&After杂志的幕后推手。通过他的在线课程，McWade 教会了我很多关于布局和使用网格的好处，并真正帮助我成为一名更好的设计师。根据您的问题，我认为您也可以从向他学习中受益。你可以在这里查看 Lynda 上的课程。您必须登录，Lynda.com 是一项付费服务​​，但如果您需要，他们提供 30 天免费试用。

然后是您根据您的插图提出的关于排水沟的具体问题。您应该查看 Bootstrap 的有关其网格系统的文档。在他们的实践中，他们使用水平填充来创建各个列之间的排水沟，因此您实际上甚至看不到那里的排水沟，因此它们在某种程度上得到了照顾。此外，如果您想在某些列之间腾出更多的喘息空间，您可以通过偏移类轻松做到这一点。您可以从 Internet 上找到许多优秀的资源来学习更多关于 Bootstrap 或其他类似框架的 12 列网格系统的信息。

您应该专注于了解如何使用网格布局及其提供的好处。毕竟它只是一个网格。如果您喜欢或需要，您可以使用它并将您的布局播放到排水沟，如果您愿意的话。当然，如果您想保持整洁的布局，这不一定是明智的做法，但为什么不有些情况下您的设计会从中获利。

此外，Threehouse 教授一门很棒的在线课程，介绍如何使用 Bootstrap 启动和运行，如果您想先提示一下，他们还提供免费试用。这是Guil Hernandez的精彩课程的链接。

我不知道你的问题有多少取决于 Sketch，它输出到 html 吗？不过，我确实知道响应式网页设计的基础知识。

创意样式表 (CSS) 从您的 HTML 网页链接。样式表包含媒体查询，用于检查用户拥有的屏幕尺寸并提供该尺寸的样式。

它们看起来像这样：

@media only screen and (min-width: 600px) { /* 对于平板电脑：/ {样式定义列和间距以及您想要的平板电脑大小}} @media only screen and (min-width: 768px) { / For desktop: */ {样式定义列和间距以及您想要的桌面大小的所有内容}}

还有几种尺寸：手机、平板电脑水平和垂直、笔记本电脑和台式机、大屏幕等。它们都是由像素尺寸定义的。当某个设备打开网页时，它会获得适用于其屏幕尺寸的那些样式。

这就是反应能力！

基本上，您可以为每个屏幕尺寸设计布局，并将每个布局放入该屏幕尺寸的媒体查询中。它们可以是完全不同的样式、比例、颜色、布局等。

通常人们使用相同的格式在不同的屏幕上以不同的方式布局。例如，如果他们在台式机上有 12 列，那么平板电脑上有 3 列，手机上有 1 列。其余列中的内容移动到顶行下方，因此您向下滚动以查看它们。

对于初学者来说，对所有响应进行编程非常复杂，但是在像 bootstrap 这样的 Web 平台中有预定义的媒体查询，这是免费的。

如果您将引导 CSS 链接到您的网页，您可以使用他们的预定义代码在不同的屏幕尺寸上设置您的列。他们使用最多 12 列的方案，因此在您开始一行后，您可以使用“col-md-12”类开始一列，这意味着中等屏幕上将有 12 列，它会在较小的屏幕上自动将它们向下移动。一个列可以有多个类，如果你想得到具体的，你可以分类一个 col-lg-12 col-md-3 hidden-sm，这意味着大屏幕上的 12 列，中屏幕上的 6 列，并在小屏幕上隐藏它。

在大屏幕的媒体查询中，gutter 或列之间的间距也可以以相同的方式定义，该规则类似于 padding-right: 20px。并且在小屏幕的媒体查询中减少填充。

我相信 Bootstrap 在大屏幕和小屏幕尺寸上给出了相同的列间距。这看起来并不好笑，因为 10 像素在手机上比在台式机上小得多。

我希望这有帮助。