在 Part6 和大家一起探讨了在网格布局中怎么使用 grid-auto-columns 和 grid-auto-rows 以及 grid-row、grid-column 和 grid-area 创建隐式网格。在使用 grid-row 、grid-column 或 grid-area 放置网格项目的时候，有可能会造成网格缺口出现。在网格布局中，我们可以使用 grid-auto-flow 属性让网格项目更好的被放置到网格单元格上。这篇文章主要和大家探讨了网格项目自动放置属性 grid-auto-flow 的基本语法和自动放置规则等特性，感兴趣的继续往下阅读。

记得去年整理一篇也是关于 CSS 新特性方面的内容，即《2020年CSS有哪些新特性》。这回在 T(X) Team.午夜识堂 也和大家一起聊了一些 CSS 新特性方面的话题，主要是帮助团队同学能拓展一下 CSS 方面的新知识。虽然聊的是“新特性”，但其中有些特性并不怎么“新”，或许已在你的项目中，或许已接触过，只是不太了解而以。接下来，就和大家一起来简单地回顾一下这些特性，希望大家能喜欢，也希望对大家平时工作有所帮助。

CSS 网格布局中有 显式网格 和 隐式网格 之分，在 CSS 网格布局中可以使用 grid-template-columns 、 grid-template-rows 和 grid-template-areas 可以定义显式网格，并且可以定义显式网格固定的网格轨道数量，同时 grid-template-columns 和 grid-template-rows 可以用来显式指定网格轨道尺寸。而在 CSS 网格布局中，可以在网格容器上使用 grid-auto-columns 、 grid-auto-rows 和 grid-auto-flow 可以显式定义隐式网格，并且 grid-auto-columns 和 grid-auto-rows 可以用来指定隐式网格轨道的尺寸。那么在这篇文章中，主要和大家一起探讨在 CSS 网格布局中如何定义隐式网格和指定隐式网格轨道尺寸。

前面花了两个章节（Grid布局 Part3 和 Part4）介绍了在grid-template-columns 和 grid-template-rows 中使用固定长度值，动态值和一些关键词来设置网格轨道的大小。除了这些之外，还可以使用一些函数，比如minmax(min, max)、repeat() 等来设置网格轨道大小。在这一章节点，主要围绕着在 grid-template-columns 和 grid-template-rows 属性中如何使用函数（minmax(min, max) 和 repeat()）设置网格轨道尺寸，感兴趣的话，请继续往下阅读。

在“图解CSS：Grid布局” 系列 的第三部分 主要探讨了，在 grid-template-columns 和 grid-template-rows 中使用长度值来设置网格轨道尺寸大小。这里长度值指的是使用不同单位（比如，px，%，em，rem和vw等）值，并且花了较长的篇幅和大家探讨了 fr （弹性系数，又称<flex>系数）给网格轨道尺寸带来的变化以及 fr 在网格轨道中是怎么计算的。不过，在网格布局中，除了使用上一章节中用的带有不同单位的长度值之外，还可以使用一些关键词，比如接下来要介绍的 none 和 auto（我们熟悉的），min-content、max-content、fit-content 等关键词以及fit-content()函数。阅读完这篇文章之后，你就能了解这些关键词是如何帮助我们来设置网格轨道尺寸。感兴趣的同学请继续往下阅读。

在第二部分中主要介绍了如何使用display来创建网格容器和网格项目，以及怎么使用 grid-template-columns、grid-template-rows 和 grid-template-areas 定义显式网格。在这部分（Part3）将和大家探讨如何设置网格轨道尺寸？简单地说，在grid-template-columns 和 grid-template-rows 中可以显式设置网格轨道大小（列宽和行高），而且设置大小的方式有很多种方式，比如使用不同的长度单位，使用关键词，使用CSS函数等来设置网格轨道大小。如果你感兴趣的话请继续往下阅读。

在上一节中，主要介绍了 CSS 网格布局中的一些重要概念和相关术语。从这些概念和术语中，从侧面也再次说明CSS 网格布局到目前为止是最为复杂的一个布局系统，换句话说，CSS 网格布局系统中会有很多属性，这些属性和 Flexbox 布局有些类似，有些属性只能作用于网格容器，有些属性只能作用于网格项目。而在这篇文章中，先从可用于网格容器的属性，即使用display属性创建网格容器和网格项目， grid-template-areas、grid-template-columns 和 grid-template-rows 以及这三个属性的简写属性grid-template 来定义显式网格。如果感兴趣的请继续往下阅读。

Grid 布局指的是 CSS Grid Layout，它和以往 CSS 框架（CSS Framework）中所说的网格系统（Grid System）有所不同。它是一个基于网格的二维布局系统，在 CSS 中有三个版本的规范（Level 1、Level 2 和 Level 3，其中 Level 1 和 Level 2 已进入 W3C 规范 TR 阶段，Level 3 目前还在 ED 阶段）从不同的角度定义 CSS 网格布局模块，这几个模块是专门为解决布局问题而创建的。另外，到目前为止，在 CSS 的系统中，只有 CSS Grid 布局才是二维布局。同时它也是一个复杂的布局系统，所涉及到布局知识要比以往了解的布局模块（比如我们熟悉的 Flexbox 布局）要复杂得多。为此，在图解 CSS 系列中，将分几篇文章来和大家一起探讨 CSS Grid 布局模块。

图解CSS：CSS滚动捕捉这一章节分成两个部分，第一部分主要介绍了 CSS 滚动捕捉理论方面的知识，详细介绍了 CSS 滚动捕捉中的 scroll-snap-type 、scroll-snap-align 、scroll-margin 、scroll-padding 以及 scroll-snap-stop 等属性。并且通过一些示例向大家展示了它们怎么使用。在第二部分，也就是接下来的内容中，从简单的示例着手（有些示例在第一部分也出现过），慢慢过渡到复杂的示例，比如模拟 iOS列表向左滑动的交互效果。如果你感兴趣的话，请继续往下阅读。

CSS 滚动捕捉是 W3C 中 CSS Scroll Snap Module Level 1 模块，可以用来创建一个可滚动的容器，可用来替代以往依赖 JavaScript 脚本来创建滑块组件。也就是说，使用该特性（CSS 的滚动捕捉特性）是快速将元素制作成可滚动容器的一种简单快速的方法。另外，CSS 滚动捕捉特性还可以帮助我们给用户更好的体验。接下来和大家一起来探讨这个 CSS 新特性，即 CSS 滚动捕捉。