响应式设计和网格：我应该把导航栏放在哪里？

Question

我正在构建一个基于metalsmith和PureCSS框架的小型博客，它有一个简单的三行布局，如下所示：

<div class="pure-g">
<div class="pure-u-1"> Navbar </div>
<div class="pure-u-1"> Content </div>
<div class="pure-u-1"> Footer </div>
</div>

由于我仍在学习许多关于CSS和响应式设计的新东西，我想知道导航栏是否也应该放在网格行中，或者它是否应该位于网格行之外

人们可见的所有内容都需要包含在网格单元。这样可以确保内容得到正确呈现。

这将使其成为是，因为导航菜单当然对用户可见。然而，这难道不会让导航栏处理媒体查询变得更加复杂吗？那么，当使用响应网格时，我应该把导航条放在哪里呢？

Answer 1

否。导航栏不一定在网格内。使用网格的主要目的是使内容看起来更好、更合适。它还帮助程序员决定将网格的多少块分配给某个元素。

但是，由于导航栏一直贯穿页面，因此没有理由为其指定网格大小。它应该始终是100%。

如果你正在构建一个博客应用程序，那么只有你的内容应该在你的网格系统中，以便正确地呈现元素。据我所见，页脚通常也会一直延伸到整个窗口。

Answer 2

您可以使用网格。管理和处理内容和组件会更容易，在不同的浏览器中呈现也会更稳定。