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

不得不說(shuō)，兼容性已經(jīng)達(dá)到了一個(gè)可以開始大規(guī)模使用的地步了。除去一些最近新出的關(guān)于 CSS Grid 的新特性，譬如間距 gap、支持瀑布流布局的 grid-template-column: masonry，已經(jīng)可以放心的在業(yè)務(wù)中開始使用 Grid 布局了。

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

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

最近我就在尋找有沒有可以比較好鍛煉 CSS Grid 布局的方式，好好復(fù)習(xí)一下 Grid 語(yǔ)法。

無(wú)意間，找到了這個(gè)網(wǎng)站，一個(gè)通過(guò)游戲闖關(guān)的模式，實(shí)現(xiàn) Grid 語(yǔ)法的從入門到熟練掌握：

WebSite - CSS-Grid-Attack[1]：通過(guò)游戲闖關(guān)的方式學(xué)習(xí) grid 布局

Grid Attack 的一些簡(jiǎn)介

簡(jiǎn)單介紹一下 Grid Attack。它的一些核心特點(diǎn)。

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

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

嘗試一下

OK，我們實(shí)際嘗試一下。這里是 #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 的地方，補(bǔ)全，我們的代碼。使得，讓綠色虛線和紅色虛線邊框內(nèi)放置正確的 grid item。

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

根據(jù)提示，控制多出來(lái)的網(wǎng)格的排布，就需要 grid-auto-columns 和 grid-auto-rows。

我們需要通過(guò)定義代碼，讓最后的兩個(gè) grid item，占據(jù) 100px 的高度即可。

題解如下：

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

右側(cè)的布局也會(huì)實(shí)時(shí)變化，更新如下：

可以看到，綠色虛線和紅色虛線邊框內(nèi)正確地放置了 6 grid item。本關(guān)就通過(guò)了。

這里，其實(shí)我省略了一些過(guò)程，譬如去學(xué)習(xí)了解，搞懂 grid-auto-columns 和 grid-auto-rows 的過(guò)程。

這個(gè)項(xiàng)目有意思的地方在于，有 3 種游戲模式，涵蓋了簡(jiǎn)單、中等和困難不同級(jí)別的 CSS 網(wǎng)格知識(shí)。

其次是它互動(dòng)有趣的環(huán)境 ，讓學(xué)習(xí)感覺就像在玩耍，很有意思。

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

感覺寫的有點(diǎn)像軟文了，但是確實(shí)我自己完整做完 80 關(guān)，感覺收獲還是很大的。

初學(xué)者可以把它當(dāng)成邊學(xué)習(xí)語(yǔ)法邊鞏固的一個(gè)習(xí)題網(wǎng)站，而已經(jīng)有一定基礎(chǔ)的可以當(dāng)成一個(gè)查缺補(bǔ)漏的復(fù)習(xí)工具。

網(wǎng)址：https://codingfantasy.com/games/css-grid-attack。

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

最后

好了，本文到此結(jié)束，希望對(duì)你有幫助 ！

參考資料

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