邊學邊玩CSS Grid

本文做者：劉觀宇，360奇舞團高級前端工程師、技術經理，曾參加360導航、360影視、360金融、360遊戲等多個大型前端項目。關注W3C標準、IOT、人工智能與機器學習的最新進展，W3C CSS工做組成員。

十年磨一劍，霜刃不曾試。今日把示君，誰有不平事。 —— 唐·賈島《劍客》

遊戲概況

Grid Garden¹是Codepip²建立的一款寓教於樂的在線網頁遊戲，遊戲共有28關。玩家能夠經過過關的方式掌握CSS最新標準CSS Grid。

遊戲的設定是一個花園種植胡蘿蔔的場景，玩家經過在代碼區填寫CSS Grid的相關代碼完成除草、澆水等任務。經過玩家的辛勤勞做，必定可以吃上純自然、無公害的胡蘿蔔。

打開遊戲，咱們發現，遊戲存在多語言版。在左側底部就能夠切換各類語言。事實上，筆者對本身的英語水平是很是有信心的，因此堅決果斷的切換到——簡體中文版。

除了代碼區和任務區，玩家能夠在選關區選擇28關的任意一關來挑戰；當玩家在代碼區敲入代碼時候，右側的任務和結果展現區會實時根據代碼展示結果。若是代碼完成了任務，則點擊提交按鈕，會進入下一關，若是玩家通關的話，則展現通關特效;若是代碼不能完成任務，提交按鈕會灰掉。若是玩家硬來，代碼區會有一個錯誤特效供玩家欣賞:-(

除了遊戲自己，遊戲的目的是加深玩家對CSS Grid的理解。說到CSS Grid，這但是一種強大的Web頁面佈局方式。恰當的使用CSS Grid，能夠高效地解決不少常見的佈局問題，並且優雅、簡潔。完整的CSS Grid屬性參考，可查閱這裏³。因爲CSS Grid標準尚屬CR(CR，Candidate Recommendation)階段，若是你是最新標準的愛好者，還能夠跟進CSS工做組關於CSS Grid的最新進展⁴。

儘管如此，如今主流瀏覽器都已經有了不一樣程度的支持，支持度以下圖所示：

說到這裏，各位都火燒眉毛地想要在遊戲中一試身手了吧，那麼話很少說，Let's Go。

過關實錄

跟網格項玩耍

也許各位玩家徹底沒有接觸過CSS Grid，剛剛進來可能會有些不知所措。咱們姑且認爲前面幾關是教學關。通常遊戲的教學關都會有一我的物在屏幕上蹦來蹦去外加叨逼叨來普及各類概念和操做。那麼筆者如今就來飾演一下這我的物。

1. CSS Grid元素主要分爲兩大類：網格容器和網格項。網格容器是父元素，網格項是子元素。
2. 對於網格容器和網格項各有不一樣的屬性修飾。
3. 聲明Grid佈局要作的事情是在網格容器的CSS代碼中指定display: grid;、display: inline-grid;或者display: subgrid;
4. 網格線構成網格結構的分界線，是定位網格項的參照。下圖就是行row和列column的第一個網格線的位置。換句話說，對於一個每行有5列的網格，它的每一行總共有6個網格線。若是這點看不清楚，那可能須要複習植樹問題了:-(

5. 網格軌道是指相鄰的 網格線之間的部分，下圖箭頭所指是一個網格軌道。

掌握了這些知識咱們就能夠開始過關之旅了。

第1關到第11關設置主要是針對網格項屬性grid-column-start和grid-column-end展開的，至關的簡單，相信玩家必定能夠很快的完成。

下面簡單總結一下第1-11關：

1. grid-column-start和grid-column-end做用於網格項。
2. 上述值可配合使用來解決跨行跨列問題。
3. grid-column-start和grid-column-end中，start不必定比end小，逆向是被容許的。
4. 能夠設置負值，負值的意思是從最後一個網格線算起的數值。
5. 除了取數值外，還可使用span關鍵字。格式是span <number>意思是跨越多少個網格軌道
6. 可使用grid-column: <start>/<end>來簡寫， span關鍵字適用此縮寫。

上面可能出錯的地方在於，設置數值時候，是肯定網格線的順序而非網格軌道的順序，尤爲是負數時候，而span後面跟着的數字是網格軌道的個數。只要牢記這點就很容易。

第12關與第13關，主要展現了CSS Grid在行row上設置的能力，二維空間的設置是Grid佈局比flex佈局拓展的一個方面。

這兩關也比較簡單。

從第14關開始，咱們開始綜合運用行與列的屬性。 第14和15關的過關，須要靈活利用上述關鍵字。規範中還能夠給軌道線命名，這裏暫時沒有遇到，咱們先不使用「命名」這個利器。

第16關的意思是能夠行列的簡寫方式，依然可使用grid-area屬性再次化簡，grid-area接收4個由/隔開的值，依次爲：grid-row-start, grid-column-start, grid-row-end, grid-column-end。

第17關告訴咱們，重迭覆蓋是不影響計算機制的。

依然很簡單，過。

針對17關的重疊，第18-19關引入了屬性關鍵字：order，order相似於z-index，代表疊放順序，數值越大，越在上。容許負數。

很簡單是否是。

跟網格容器玩耍

上面咱們對網格項的「一波操做猛如虎」，下面咱們再來看一看，對於網格容器的操做，能不能「橫掃千軍我作主」。

第20關到第22關主要針對網格容器的屬性grid-template-columns和grid-template-rows展開的。

下面簡單總結一下第20-22關：

1. grid-template-columns和grid-template-rows用於設置Grid佈局的行列中網格軌道的大小
2. repeat函數能夠簡化多個同值，格式爲repeat(N, value)，其中N是個數，value是值。repeat能夠與其餘值混用，如：grid-template-columns: repeat(N-1, value) value
3. 定義上述屬性時，容許長度單位混合使用。

第23-25關，主要說明了關鍵字fr的使用。

下面總結一下第23-25關：

1. fr是「分數」的英文單詞fraction的簡寫。
2. fr用於等分等分網格容器剩餘空間。那麼fr是怎麼分配空間的呢？舉個例子說明：設有A、B、C三個網格軌道，他們的grid-template-columns的設置依次是1fr、2fr和3fr。那麼他們共同把一個行分爲6等分，則A，B，C的空間就依次得到了這一行的1/六、2/6和3/6。
3. fr是能夠和其餘單位混用的，如grid-template-columns: 1fr 50px 1fr 1fr;。計算優先級記住一點便可：除了auto以外，先計算全部固定值(包括百分數)後，剩下的空間再計算fr。

第26關介紹grid-template-rows與前面的grid-template-columns語法相似。留給玩家嘗試。

第27關介紹了grid-template-columns與grid-template-rows的簡寫方式grid-template，寫法是：grid-template-rows / grid-template-columns

經歷了百轉千回，咱們終於來到了關底，咱們來看看大BOSS的尊容：

WTF？只能寫一行代碼麼？ 仔細想一想：grid-template最簡潔，格式是/隔開的先行後列。 先解決行：須要把50px先分出去，後面100%給到花草。再解決列，列的場景是典型的fr使用場景，雜草佔空間的1/5，胡蘿蔔佔4/5。

因而代碼是：grid-template: 1fr 50px/1fr 4fr;

Bingo!恭喜你，通關成功！

結語

是的，咱們已經最快速度領略了CSS Grid的風采。然而，對於整個的CSS Grid咱們僅僅作了最經常使用的展現，更多的好玩的作法，還要等待你們的發掘，以及標準的演進。

文內連接

1. cssgridgarden.com/
2. codepip.com/
3. developer.mozilla.org/zh-CN/docs/…
4. drafts.csswg.org/css-grid/

相關文章

• 你不知道的 CSS Grid 佈局
• 2017年年中總結——前端大事件回顧
• 不用預編譯，CSS 直接寫嵌套的日子就要到了

致謝

感謝李鬆峯老師、高峯、劉博文對本文修訂提出的中肯意見。 設計師王旋美眉幫忙設計了精美的題圖。 在此誠摯的表示感謝。

關於奇舞週刊

《奇舞週刊》是360公司專業前端團隊「奇舞團」運營的前端技術社區。關注公衆號後，直接發送連接到後臺便可給咱們投稿。