# Grid風格布局 > CSS 網格布局(Grid Layout) 是CSS中最強大的布局系統。 > > 這是一個二維系統，這意味著它可以同時處理列和行，不像 [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 那樣主要是一維系統。 > > 你可以通過將CSS規則應用于父元素（成為網格容器）和該元素的子元素（網格元素），來使用網格布局。 [TOC] ## 1. 引言 * CSS網格布局（又名“網格”）是一個二維的基于網格的布局系統，其目的只在于完全改變我們設計基于網格的用戶界面的方式。 * CSS一直用來布局網頁，但一直都不完美。 * 一開始我們使用table 做布局，然后轉向浮動、定位以及inline-block，但所有這些方法本質上都是 Hack 的方式，并且遺漏了很多重要的功能（例如垂直居中）。 * Flexbox的出現在一定程度上解決了這個問題，但是它的目的是為了更簡單的一維布局，而不是復雜的二維布局（Flexbox和Grid實際上一起工作得很好）。 * Grid是第一個專門為解決布局問題而生的CSS模塊 * 雷切爾·安德魯（Rachel Andrew）的書[為CSS Grid布局準備](http://abookapart.com/products/get-ready-for-css-grid-layout)。 這本書對網格布局做了徹底、清晰的介紹，也是是整篇文章的基礎，我強烈建議你購買并閱讀他的書。 * 我的另一個重要靈感是Chris Coyier的[Flexbox完全指南](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)，當需要查閱 flexbox 的一切資料時我就會找這篇文章。 ------------------------------------------------------------------------ ## 2. 基礎知識以及瀏覽器支持情況 * 一開始你需要使用`display：grid`把容器元素定義為一個網格，使用`grid-template-columns`和`grid-template-rows`設置列和行大小，然后使用`grid-column` 和 `grid-row`把它的子元素放入網格。 * 與flexbox類似，網格子元素的原始順序不重要。 你的可以在 CSS 里以任意順序放置它們，這使得使用媒體查詢重新排列網格變得非常容易。 想象一下，我們需要定義整個頁面的布局，然后為了適應不同的屏幕寬度完全重新排列，我們只需要幾行CSS就能實現這個需求。 網格是有史以來最強大的CSS模塊之一。 * 截至2017年3月，許多瀏覽器都提供了原生的、不加前綴的對CSS Grid的支持，比如 Chrome（包括Android），Firefox，Safari（包括iOS）和Opera。 另一方面，Internet Explorer 10和11支持它，但需要使用過時的語法。 Edge瀏覽器已經宣布將支持標準的Grid語法，但暫未支持 * 桌面瀏覽器: | Chrome | Opera | Firefox | IE | Edge | Safari | | :----- | :---- | :------ | :--- | :--- | :---------------- | | 57 | 44 | 52 | 11* | 16 | 10.1移動端 / 平板 | * 移動端 / 平板 | iOS Safari | Opera Mobile | Opera Mini | Android | Android Chrome | Android Firefox | | :--------- | :----------- | :--------- | :------ | :------------- | :-------------- | | 10.3 | No | No | 62 | 62 | 57 | > 在生產環境中使用Grid只是時間問題，但現在是我們該學習的時候了