html - 每页一个网格容器？

Question

所有网格 CSS 框架都有某种表示网格边界的“容器”类。

假设我有一个页面:

• 标题
• 搜索表单
• 搜索结果(动态加载)
• 一些更动态的内容
• 页脚

我应该 (A) 将以上所有内容都放在一个网格容器中(即每页有一个容器)；或者 (B) 最好将上述每个部分(即页面的逻辑部分)作为一个单独的容器，或者 (C) 可以有 3 个容器:页眉、内容、页脚。

这种方法有什么区别还是只是个人选择？我只是找不到关于这个主题的任何建议。

Answer 1

取决于元素和设计要求。 “容器”类应该包含内容，容器之外的任何内容都不应在容器 div 内。

例子:

标题的背景色延伸 100% 的屏幕宽度，但标题元素与容器左对齐/右对齐。

标记看起来像这样:

<header><!-- this would be 100% width -->
 <div class="container></div><!-- this would be whatever your container max-width value is -->
</header>