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

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

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

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

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

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

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

Grid Attack 的一些簡介

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

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

然后，利用給出的提示和部分代碼，通過完成指定的 Grid 布局，解鎖該關(guān)卡，進(jì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)就通過了。

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

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

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

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

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

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

網(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。