在学习Web布局之前有一个非常重要的概念需要理解，这个概念就是盒模型。CSS盒模型是多个不同的CSS规则集合，定义了如何渲染Web页面。这一系列的不同的属性决定了HTML元素在页面上的位置。到目前为止，所有Web页面都只是一个接一个渲染的元素。可以说盒模型是我们定制默认布局方案的工具包。作为Web开发人员，大部分工作是将应用CSS盒模型中的规则将设计模型转换为Web页面（简单点说，就是UI还原）。接下来要介绍的CSS盒模型又被视为UI还原的重中之重，因为它定义了盒子的单独行为。特别是在以后的章节中，我们学习的各种布局都将会围绕着HTML的结构和CSS的盒模型一起来展开。
大漠 Web自1989到今年刚好走过30年历程。30年来Web也发生了翻天覆地的变化，从事Web开发工作也衍生出多种工作岗位，而我们做为Web前端开发者的其中一员，更应该感谢Web给我们带来的机遇和未来。自从今天开始，我们来一起探讨Web开发中其中一小部分相关的技能（或者说知识），即Web布局。希望接下来的这个专栏对大家在今后的工作和学习上都会有所帮助。
大漠 大漠 把浮动放到今天来聊，可能很多小伙伴会觉得没有任何意义。会说“CSS都发展到这种程度了，Web的布局还会有谁用浮动呢”？那么真的是如此吗？浮动真的要退出CSS的舞台成为历史吗？我的答案是不可能的。不管CSS怎么发展，浮动都还有其存在的意义和作用，而且在一些场景中是离开不浮动的，最起码近几年之内是不可能的。至于为什么，请继续往下阅读。
大漠 Web布局可以说是灵活的也是久被受限的。在众多的开发者眼里，Web的布局就应该是方方正正的，因为Web中的每个元素都类似一个盒子，这些盒子就是方方正正，规规矩矩地。同时在很多视觉的眼里也认为，Web的布局无法打破矩形排列的限制。比如说，要在Web中实现一个类似杂志的排版是非常困难的，甚至是不太可能的。值得庆幸的是，时至今日，Web的技术在不断的革新，很多新的特性可以让我们打破这样的限制，让你在Web上实现像杂志一样的排版布局。接下来，我们就来看看，在Web中实现媒体布局会有哪些亮点，有可能会用到哪些特性。
大漠 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 网格布局系统中会有很多属性，这些属性和 Flexbox 布局有些类似，有些属性只能作用于网格容器，有些属性只能作用于网格项目。而在这篇文章中，先从可用于网格容器的属性，即使用display属性创建网格容器和网格项目， grid-template-areas、grid-template-columns 和 grid-template-rows 以及这三个属性的简写属性grid-template 来定义显式网格。如果感兴趣的请继续往下阅读。
大漠 在第二部分中主要介绍了如何使用display来创建网格容器和网格项目，以及怎么使用 grid-template-columns、grid-template-rows 和 grid-template-areas 定义显式网格。在这部分（Part3）将和大家探讨如何设置网格轨道尺寸？简单地说，在grid-template-columns 和 grid-template-rows 中可以显式设置网格轨道大小（列宽和行高），而且设置大小的方式有很多种方式，比如使用不同的长度单位，使用关键词，使用CSS函数等来设置网格轨道大小。如果你感兴趣的话请继续往下阅读。
大漠 在“图解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()函数。阅读完这篇文章之后，你就能了解这些关键词是如何帮助我们来设置网格轨道尺寸。感兴趣的同学请继续往下阅读。
大漠 前面花了两个章节（Grid布局 Part3 和 Part4）介绍了在grid-template-columns 和 grid-template-rows 中使用固定长度值，动态值和一些关键词来设置网格轨道的大小。除了这些之外，还可以使用一些函数，比如minmax(min, max)、repeat() 等来设置网格轨道大小。在这一章节点，主要围绕着在 grid-template-columns 和 grid-template-rows 属性中如何使用函数（minmax(min, max) 和 repeat()）设置网格轨道尺寸，感兴趣的话，请继续往下阅读。
大漠