它將網(wǎng)頁劃分成一個(gè)個(gè)網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。以前，只能通過復(fù)雜的 CSS 框架達(dá)到的效果，現(xiàn)在瀏覽器內(nèi)置了。

• 原文來源：詳情

一、概述

網(wǎng)格布局（Grid）是最強(qiáng)大的 CSS 布局方案。

上圖這樣的布局，就是 Grid 布局的拿手好戲。

Grid 布局與?Flex 布局有一定的相似性，都可以指定容器內(nèi)部多個(gè)項(xiàng)目的位置。但是，它們也存在重大區(qū)別。

Flex 布局是軸線布局，只能指定"項(xiàng)目"針對(duì)軸線的位置，可以看作是一維布局。Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局。Grid 布局遠(yuǎn)比 Flex 布局強(qiáng)大。

二、基本概念

學(xué)習(xí) Grid 布局之前，需要了解一些基本概念。

2.1 容器和項(xiàng)目

采用網(wǎng)格布局的區(qū)域，稱為"容器"（container）。容器內(nèi)部采用網(wǎng)格定位的子元素，稱為"項(xiàng)目"（item）。

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

上面代碼中，最外層的<div>元素就是容器，內(nèi)層的三個(gè)<div>元素就是項(xiàng)目。

注意：項(xiàng)目只能是容器的頂層子元素，不包含項(xiàng)目的子元素，比如上面代碼的<p>元素就不是項(xiàng)目。Grid 布局只對(duì)項(xiàng)目生效。