今天我們來學習一下網格佈局，效果圖如下：
首先第一步我們先在head標記裏把style標籤寫上，然後去掉默認樣式，代碼如下圖：
第二步創建一個盒子模型，代碼如下圖：
我們首先給盒子的寬和高300px，然後給盒子一個顏色，比如紅色。接着再給盒子一個1px的黑色邊框，爲了更好的在屏幕中顯示我們給盒子加了一個margin值。
這樣我們的盒子模型就創建好了，然後我們就可以添加網格代碼了。
然後我們給盒子加上網格代碼，這裏要用到display:gird;做出一個3*3的網格，代碼如下：
最後我們加上選擇器，給body裏面寫上div，網格佈局就做好了，代碼如下：
那麼我們今天的練習就完成了。