寓教于樂，Grid 布局小游戲 Grid Attack
最近沒事瞄了一眼 CSS Grid 的 CaniUse：
不得不說，兼容性已經(jīng)達到了一個可以開始大規(guī)模使用的地步了。除去一些最近新出的關(guān)于 CSS Grid 的新特性，譬如間距 gap、支持瀑布流布局的 grid-template-column: masonry，已經(jīng)可以放心的在業(yè)務中開始使用 Grid 布局了。
如何從入門到熟練使用 Grid?-- Grid-Attack
但是，CSS Grid 的一大坨語法總是容易讓人望而生畏，心生退意。
最近我就在尋找有沒有可以比較好鍛煉 CSS Grid 布局的方式，好好復習一下 Grid 語法。
無意間，找到了這個網(wǎng)站，一個通過游戲闖關(guān)的模式，實現(xiàn) Grid 語法的從入門到熟練掌握：
WebSite - CSS-Grid-Attack[1]：通過游戲闖關(guān)的方式學習 grid 布局
Grid Attack 的一些簡介
簡單介紹一下 Grid Attack。它的一些核心特點。
即便是在 Grid 布局方面零基礎(chǔ)的同學，也可以嘗試下，游戲一共有 80 關(guān)。在每一關(guān)的開始前，都會介紹 1 到 2 個 grid 相關(guān)的屬性，并且給出相應的 Demo 和解釋，通過 Demo，我們基本就能理解該屬性如何具體使用。
然后，利用給出的提示和部分代碼，通過完成指定的 Grid 布局，解鎖該關(guān)卡，進入下一關(guān)。
嘗試一下
OK，我們實際嘗試一下。這里是 #50，第 50 題。
題目如下：
題目已經(jīng)給出的代碼：
<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 的地方，補全，我們的代碼。使得，讓綠色虛線和紅色虛線邊框內(nèi)放置正確的 grid item。
我們可以看到題目中的 Grid item 有 6 個，但是實際只定義了一個 2x2 的 grid 布局 grid-template: 1fr 1fr / 1fr 1fr，因此，這里考察的其實是 Grid 布局中的 顯示網(wǎng)格和隱式網(wǎng)格。
根據(jù)提示，控制多出來的網(wǎng)格的排布，就需要 grid-auto-columns 和 grid-auto-rows。
我們需要通過定義代碼，讓最后的兩個 grid item，占據(jù) 100px 的高度即可。
題解如下：
#field {
display: grid;
gap: 20px;
grid-template: 1fr 1fr / 1fr 1fr;
/* type here */
grid-auto-rows: 100px;
}
右側(cè)的布局也會實時變化，更新如下：
可以看到，綠色虛線和紅色虛線邊框內(nèi)正確地放置了 6 grid item。本關(guān)就通過了。
這里，其實我省略了一些過程，譬如去學習了解，搞懂 grid-auto-columns 和 grid-auto-rows 的過程。
這個項目有意思的地方在于，有 3 種游戲模式，涵蓋了簡單、中等和困難不同級別的 CSS 網(wǎng)格知識。
其次是它互動有趣的環(huán)境 ，讓學習感覺就像在玩耍，很有意思。
下面是官方給的一些介紹圖：
感覺寫的有點像軟文了，但是確實我自己完整做完 80 關(guān)，感覺收獲還是很大的。
初學者可以把它當成邊學習語法邊鞏固的一個習題網(wǎng)站，而已經(jīng)有一定基礎(chǔ)的可以當成一個查缺補漏的復習工具。
網(wǎng)址：https://codingfantasy.com/games/css-grid-attack。
嘗試一下，開啟 Grid 布局的大門。
最后
好了，本文到此結(jié)束，希望對你有幫助 ！
參考資料
[1]WebSite - CSS-Grid-Attack: https://codingfantasy.com/games/css-grid-attack/play?mode=medium&love=true。
