网页设计中列 第1篇
使用栅格很成功的情况下，它应该也会帮助你构建网站和它包含的各个页面的思维模型。 这同时也意味着同一个网站的各个页面的结构不应完全不同—— 调整每个页面使其有共同点来实现一致性应作为设计计划的一部分。
让我们再来看一些Etsy成功解决此问题的示例。 但是这次，我们集中讨论栅格如何满足其对不同的内容需求，以及在需要的时候如何将它们逐页地混合在一起。 我认为他们在保持某种一致性方面做得非常出色。这种一致性创造了统一的印象，还将页面整齐地绑在一起。这样一来，用户在浏览的时候，全程都有指引，并且也明白对不熟悉的页面应该有什么样期望。 他们的思维导图是健全的，因此不会出现任何结构上的意外来破坏用户体验。
他们为页面创造了一个很好的节奏，加上简洁的重复使用，他们的栅格看起来很优雅大方。
总体而言，系统地规划内容排版是整篇文章主题的关键。 要将各种形式的内容捆绑在一起，一致的栅格是最有效的工具。统一的栅格会建立一个强轴，这个强轴会引导用户的眼睛和动作（例如视觉锚点），将你设计的各个部分绑定在一起并产生凝聚力，建立更牢固的关系。 保持设计的简单！ 让你的设计更易于构建和维护。
网页设计中列 第2篇
经典两列布局是指一种网页布局方式，其中一列宽度固定，另一列宽度自适应。 这种布局方式在网页设计中非常常见，因为它能够提供良好的视觉效果和用户体验。
如图所示：
页面顶部放置一个大的导航或广告条，左边是主页示意栏，右边则是具体内容或文章，下面还有点赞栏
此类网页布局的两列都有固定的宽度，而且从内容上很容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下3个部分，即header区域、container区域和footer区域。其中，container又包含mainBox（主要内容区域）和sideBox（侧边栏）
示意图如下：
图源网络
利用我们之前学习的CSS盒子模型的浮动属性（float） ，将元素向左或向右浮动，另一个元素则自动环绕在其周围，从而实现两列布局
eg：
运行代码：
这里是文章的内容简介。
可以使用
标签进行换行。
侧边栏内容，如快速链接、广告等。
网页设计中列 第3篇
经典三列布局是指一种页面布局方式，其中包含三列，左右两列宽度固定，中间一列宽度自适应。 这种布局方式在许多网站的首页中广泛应用。
实例：
对于三列布局，浏览者的注意力最容易集中在中间栏的信息区域，其次才是左、右两侧的信息
三列布局示意图：
图源网络
eg:
运行代码：
这里是文章的内容简介。
可以使用
标签进行换行。
侧边栏内容，如快速链接、广告等。
大家可以运行感受一下