我用CSS寫了一款游戲
通過寫CSS來栽種你的胡蘿卜花園！
哈嘍大家好！最近閑來無事，發(fā)現(xiàn)了一款叫做《GRID GARDEN》的偽“保衛(wèi)蘿卜”的游戲，今天推薦給大家一起玩！
GRID GARDEN 小游戲讓你通過書寫 CSS 代碼來種植養(yǎng)護(hù)你的胡蘿卜花園！在玩游戲的同時(shí)學(xué)習(xí) grid 布局，勞逸結(jié)合就是 yyds！
網(wǎng)頁左上角會講解 grid 布局的各種屬性，我們在左下角的代碼框中輸入正確的 CSS 語句就能觸發(fā)動作，右邊的花園會同步進(jìn)行澆水、除草的操作，可以讓我們知道網(wǎng)格中的哪些區(qū)域被選中。
游戲一共 28 個(gè)關(guān)卡，前 19 關(guān)主要講解網(wǎng)格的選區(qū)，后 9 關(guān)主要講解網(wǎng)格的布局。
接下來讓我們一起看個(gè)示例玩玩吧！
澆水前：
使用grid-column-start和grid-column-end屬性來給胡蘿卜澆水。grid-column-start指從第幾列開始，grid-column-end指到第幾列結(jié)束。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start: 1;
grid-column-end:4;
}
澆水后：
grid-column是網(wǎng)格列屬性，是grid-column-start和grid-column-end的一個(gè)縮寫形式，它可以同時(shí)輸入起始結(jié)束兩個(gè)值，只需要中間用 '/' 分開。比如上面的內(nèi)容我們也可以寫為：
#water {
grid-column: 1 / 4;
}
grid-row是網(wǎng)格的行屬性，用法和grid-column一致。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-row: 3 / 6;
}澆水效果如下：
grid 布局還有許多其他屬性，span關(guān)鍵字、order屬性、grid-template屬性等等，感興趣的朋友可以去玩玩這款《GRID GARDEN》小游戲~
歡迎有興趣的同學(xué)試試，如果本文對您有幫助，也請幫忙點(diǎn)個(gè) 贊 + 在看 啦！??
?? 點(diǎn)擊下方閱讀原文查看項(xiàng)目
往期文章：