它將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過復雜的 CSS 框架達到的效果，現在瀏覽器內置了。
- 原文來源：詳情
一、概述
網格布局（Grid）是最強大的 CSS 布局方案。
上圖這樣的布局，就是 Grid 布局的拿手好戲。
Grid 布局與?Flex 布局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。
Flex 布局是軸線布局，只能指定”項目”針對軸線的位置，可以看作是一維布局。Grid 布局則是將容器劃分成”行”和”列”，產生單元格，然后指定”項目所在”的單元格，可以看作是二維布局。Grid 布局遠比 Flex 布局強大。
二、基本概念
學習 Grid 布局之前，需要了解一些基本概念。
2.1 容器和項目
采用網格布局的區域，稱為”容器”（container）。容器內部采用網格定位的子元素，稱為”項目”（item）。
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
上面代碼中，最外層的<div>元素就是容器，內層的三個<div>元素就是項目。
注意：項目只能是容器的頂層子元素，不包含項目的子元素，比如上面代碼的<p>元素就不是項目。Grid 布局只對項目生效。