42、CSS布局网格系统：Skeleton的使用指南

CSS布局网格系统：Skeleton的使用指南

1. 布局网格系统概述

在网页设计中，当网站需要适配各种不同形状和尺寸的屏幕时，我们需要更精确且响应式的页面设计技术，CSS布局网格系统就是这样一种工具。布局网格是一种将内容按行和列进行系统排列的组织方式，在CSS中，网格系统是预定义的样式表，通过在页面HTML的 <div> 标签中添加类名来创建尺寸一致的列。

网格系统在平面设计和传统页面布局中有着悠久的历史，但很多基于印刷设计的网格理论并不适用于浏览器的灵活性。在网页设计里，网格将页面宽度划分为一定数量的“单位”，常见的单位数量是12，因为12能轻松地被分为二分之一、三分之一和四分之一。这些单位是相对测量值，类似于百分比值，在大多数CSS网格系统中，单位宽度用百分比定义，这也是创建响应式设计的关键。

例如，一个使用CSS网格系统布局的网页，其底层网格由12个单位组成，页面被分为五行。第一行有两列，公司名称所在列宽4个单位，导航栏所在列宽8个单位；第二和第三行各有一个宽12个单位的列；第四行有三列，每列宽4个单位；底部行与第一行相同，也是两列，分别宽4个单位和8个单位。网格系统会自动计算列之间的间距（gutter），使页面元素排列整齐，列宽一致。

2. HTML结构搭建

许多网页设计师和大公司（如Twitter）创建了数十种CSS网格系统供选择，这些系统大多依赖一个或多个CSS文件来创建列，并且在构建HTML以创建网格时采用类似的方法，通过一系列嵌套的 <div> 标签形成三种不同类型的页面元素：
- 容器（Containers