CSS Grid Layout（网格/栅格布局）是 CSS 最强大的布局系统，随着设备和浏览器的升级，将会是未来的主流的布局方案之一。

一、介绍(Introduction)

概述(Basic)

CSS Grid Layout 简称为Grid，网上普遍译为网格，其实更规范的说法应为栅格。

栅格对有经验的 UI 和 FE 来说并不陌生，肯定会想到栅格系统(Grid Systems)。

这“系统”早在欧洲中世纪就已经出现，当时主要用于文字排版，随着时间的推移逐步发展到平面及其他“设计”领域。

在我印象中 08~09 年左右，网页栅格化设计(Grid Design)已经出现并被广泛使用，所定义的12栅格、24栅格等规范方案仍一直被沿用至今。用通俗的方式来讲：就是以一定规则的网格阵列，规范化网页布局。

CSS Grid包含了栅格化设计的特性，是第一个专门为解决布局问题而创建的CSS 模块。如果你熟悉栅格系统和栅格化设计那对栅格布局的理解会起到一定帮助。

好的栅格布局，对于模块、元素而言都有规律可循，能在不同尺寸/分辨率下呈现最优的方式，使网页更灵活和易于扩展。但同时也考验设计师，对于不同尺寸的把握，针对前端来说也是如此。

之前使用栅格需要用到Bootstrap等的框架，并且每个框架都有一套属于自己的栅格规范，现在网格布局使我们可以更为简单的实现，无需依赖框架。 [ 查看全文... ]