最近沒事瞄了一眼 CSS Grid 的 CaniUse：

不得不說，兼容性已經達到了一個可以開始大規模使用的地步了。除去一些最近新出的關于 CSS Grid 的新特性，譬如間距 gap、支持瀑布流布局的 grid-template-column: masonry，已經可以放心的在業務中開始使用 Grid 布局了。

如何從入門到熟練使用 Grid?-- Grid-Attack

但是，CSS Grid 的一大坨語法總是容易讓人望而生畏，心生退意。

最近我就在尋找有沒有可以比較好鍛煉 CSS Grid 布局的方式，好好復習一下 Grid 語法。

無意間，找到了這個網站，一個通過游戲闖關的模式，實現 Grid 語法的從入門到熟練掌握：

WebSite - CSS-Grid-Attack[1]：通過游戲闖關的方式學習 grid 布局

Grid Attack 的一些簡介

簡單介紹一下 Grid Attack。它的一些核心特點。

即便是在 Grid 布局方面零基礎的同學，也可以嘗試下，游戲一共有 80 關。在每一關的開始前，都會介紹 1 到 2 個 grid 相關的屬性，并且給出相應的 Demo 和解釋，通過 Demo，我們基本就能理解該屬性如何具體使用。

然后，利用給出的提示和部分代碼，通過完成指定的 Grid 布局，解鎖該關卡，進入下一關。

嘗試一下

OK，我們實際嘗試一下。這里是 #50，第 50 題。

題目如下：

題目已經給出的代碼：

<div id="field">
  <div class="greenLand"></div>
  <div id="redLand"></div>
  <div class="greenLand"></div>
  <div class="redLand"></div>
  <div class="greenLand"></div>
  <div class="redLand"></div>
</div>

#field {
  display: grid;
  gap: 20px;
  grid-template: 1fr 1fr / 1fr 1fr;
  /* type here */

}

我們需要做的，就是在題目要求的 type here 的地方，補全，我們的代碼。使得，讓綠色虛線和紅色虛線邊框內放置正確的 grid item。

我們可以看到題目中的 Grid item 有 6 個，但是實際只定義了一個 2x2 的 grid 布局 grid-template: 1fr 1fr / 1fr 1fr，因此，這里考察的其實是 Grid 布局中的 顯示網格和隱式網格。

根據提示，控制多出來的網格的排布，就需要 grid-auto-columns 和 grid-auto-rows。

我們需要通過定義代碼，讓最后的兩個 grid item，占據 100px 的高度即可。

題解如下：

#field {
  display: grid;
  gap: 20px;
  grid-template: 1fr 1fr / 1fr 1fr;
  /* type here */
  grid-auto-rows: 100px;
}

右側的布局也會實時變化，更新如下：

可以看到，綠色虛線和紅色虛線邊框內正確地放置了 6 grid item。本關就通過了。

這里，其實我省略了一些過程，譬如去學習了解，搞懂 grid-auto-columns 和 grid-auto-rows 的過程。

這個項目有意思的地方在于，有 3 種游戲模式，涵蓋了簡單、中等和困難不同級別的 CSS 網格知識。

其次是它互動有趣的環境 ，讓學習感覺就像在玩耍，很有意思。

下面是官方給的一些介紹圖：

感覺寫的有點像軟文了，但是確實我自己完整做完 80 關，感覺收獲還是很大的。

初學者可以把它當成邊學習語法邊鞏固的一個習題網站，而已經有一定基礎的可以當成一個查缺補漏的復習工具。

網址：https://codingfantasy.com/games/css-grid-attack。

嘗試一下，開啟 Grid 布局的大門。

最后

好了，本文到此結束，希望對你有幫助 ！

參考資料

[1]WebSite - CSS-Grid-Attack: https://codingfantasy.com/games/css-grid-attack/play?mode=medium&love=true。