所以我正在做这个 lynda.com HTML/CSS 任务，它要求我采用我最喜欢的网页设计，确定网格有多少列，然后尝试自己重新创建布局结构。
所以假设我从互联网上拿了我最喜欢的设计模型，比如这个。看起来设计有一个 4 列网格，但后来我看到第一列比其他列宽，我感到困惑。我什至无法理解模型实际上有多宽，是像往常一样 960 像素还是更宽？
但是在视频示例中，讲师采用了旧的 lynda.com 设计，并且以某种方式非常容易地确定了网格布局，即使它看起来更复杂。
我怎样才能学会这样做？看一个网格有多少列真的那么难吗？
这里有几个问题。
不是每个人都使用网格系统，即使他们使用也不能保证网格是一致的。也许您的示例使用了一个具有更宽左列的四列网格。
网格是一种工具。一个指导方针。它们并不一定意味着您 100% 的时间都绑定到您的网格。通常，如果人们使用预烘焙框架进行设计，该框架使用一组网格系统，他们会坚持使用可用的网格——但这并不能保证。我制作了自己的网格系统，并且经常打破这些网格。
如果设计最初是在 Photoshop 或类似工具中使用网格制作的，但没有使用框架或显式 CSS 网格系统进行编码，则可能无法在不查看 Photoshop 文件的情况下判断使用了哪种网格系统。
网络上使用的最常见的网格系统（据我所见）可能是 12 列网格，然后可能是 16 列。因此，尽管它可能看起来像 4 列，但实际上它更可能基于大量列——每列由许多较小的列组成。假设 10 列分解为 4 列，即 4-2-2-2。
至于很难看到正在使用的网格——它是随练习而来的。您使用网格的次数越多，您看到使用的网格越多，您就越会识别它们。
在您的示例图像中看到一个实心网格系统并不容易，所以我快速浏览了一下，似乎我能适应的最小列数是 21 - 排水沟比实际列宽！*还值得一提的是，它是 1200 像素宽而不是 960 像素——您可以通过在图像编辑器中打开它很容易地看到它。
*快速提示：我通过在 Illustrator 中打开图像、在内容区域上绘制一个半透明矩形并使用拆分为网格功能并更改列数直到它们适合为止来做到这一点。