深入解析CSS第四章网格系统——读书笔记

4.5 网格系统

• 借助网格系统可以提高代码的可复用性
• 网格系统提供了一系列的类名，可添加到标记中，将网页的一部分构造成行和列。它应该只给容器设置宽度和定位，不给网页提供视觉样式，比如颜色和边框。
• 大部分流行的CSS框架包含了自己的网格系统。它们的实现细节各不相同，但是设计思想相同：在一个行容器里放置一个或多个列容器。列容器的类决定每列的宽度。

4.5.1 理解网格系统

• 通常网格系统的每行被划分为特定数量的列，一般是12个，但也可以是其他数。
• 选取12作为列数是因为它能够被2、3、4、6整除，组合起来足够灵活
  
• 网格系统
  每行有一个行容器div（column-n ：n是网格里的列数）

---

4.5.2 构建网格系统

• 用网格系统改造一下前面的网页
  
• 网格行的CSS
  以上代码仅仅实现了清除浮动。这样写是为了避免每添加一个行元素就要给它加一个clearfix类
• 网格列的CSS
  ＊=比较符可以匹配任意包含指定字符串的值，比如本例中可以匹配在类属性的任意位置出现column-的元素
  目前的页面：
  
  看起来并不是理想的效果，因为媒体对象重复实现了网格系统的一些样式。
  现在简化一下媒体对象的样式。去掉左浮动，因为网格系统已经包含了这条规则。去掉宽度，这样它才能填满容器100%的宽度。去掉外边距和用来清除浮动的nth-child选择器。
  
  因为删除了媒体对象的所有外边距，包括底部外边距，所以最后一行的媒体对象和容器底部之间的间隔丢失了。给容器加上底部内边距，以恢复间隔
  

---

4.5.3 添加间隔

• 添加每列之间的间隔
  
  但是，这段代码导致了网格列和网格行外的内容出现轻微的错位
  
  给行元素添加一个−0.75em的左侧外边距，把行元素的左侧拉伸到容器外面。列元素的内边距会把里面的内容往右推0.75em，第一列就会跟页面标题左对齐（如图4-21所示）。同理，还要给行元素添加负的右侧外边距，拉伸右侧。
  

---

完整的样式