資訊專欄INFORMATION COLUMN
摘要：代碼請嘗試理解上面的代碼，思考一下以上代碼會產生怎樣的布局。這是上面代碼的布局的結果是不是非常好理解，使用起來也非常簡單是不是深入探究推薦參考分鐘學會布局如何使用快速而又靈活的布局布局完全指南圖解詳細教程
Gird布局是什么？
Grid(網格) 布局使我們能夠比以往任何時候都可以更靈活構建和控制自定義網格 ; 能夠將網頁分成具有簡單屬性的行和列來完成我們需要的網格布局
Gird布局 擼完后是什么樣子？
進入你的第一個Grid布局
HTML 代碼:
box父元素，內部包含6個子元素 items
123456
要把box變成 grid(網格)，只簡單地把display 屬性設置為 grid 即可：
.box{
display:grid;
}
當然現在的上圖和grid沒什么關系，但是請記住“她”最后的樣子~~
為了使其成為二維的網格容器，我們需要定義列和行：
創建3行(columns)2列(rows)
CSS代碼 ->
.box{
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 20px 20px;
}
grid-template-columns 創建列；創建幾列就在后面寫幾個值；
grid-template-rows 創建行；創建幾行就在后面寫幾個值；
結果：
為了確保能正確理解這些值與網格外觀之間的關系，請看一下這個例子。
CSS代碼
.box{
display: grid;
grid-template-columns: 150px 50px 10px;
grid-template-rows: 50px 30px;
}
請嘗試理解上面的代碼，思考一下以上代碼會產生怎樣的布局。
這是上面代碼的布局的結果：
是不是非常好理解，使用起來也非常簡單是不是？
深入探究推薦參考：
5分鐘學會CSS Grid布局
如何使用 CSS Grid 快速而又靈活的布局
CSS Grid 布局完全指南(圖解 Grid 詳細教程)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114642.html
摘要：代碼請嘗試理解上面的代碼，思考一下以上代碼會產生怎樣的布局。這是上面代碼的布局的結果是不是非常好理解，使用起來也非常簡單是不是深入探究推薦參考分鐘學會布局如何使用快速而又靈活的布局布局完全指南圖解詳細教程 Gird布局是什么？ Grid(網格) 布局使我們能夠比以往任何時候都可以更靈活構建和控制自定義網格 ; 能夠將網頁分成具有簡單屬性的行和列來完成我們需要的網格布局 Gird布局 ...
摘要：前情提要本人是一個學渣非科班入行年了吧前端東西真的好多啊又不斷更新需要不斷的學學學在去年年底開始我就開始不斷的尋找學習的方法如何更加高效的學習如何才能學的又快又好在這半年來不斷的總結慢慢找到了一些方法和訣竅此文章不是網格布局的教學文章只前情提要 ??本人是一個學渣,非科班入行2年了吧,前端東西真的好多啊,又不斷更新.需要不斷的學學學, showImg(https://user-gold-c...
摘要：有開始肯定就有結束，，是用來控制區域結束位置。還有的值都可以取負數的，負數意味著從后往前數。等價于表示橫跨幾個單元格。也一樣的是和的簡寫。 概念篇學完了概念好像沒啥用。今天我們來使用Grid完成兩個簡單布局。 聲明容器 display: grid;或display: inline-grid;或display: subgrid;。grid 和 inline-grid 很好理解就是塊級網格...
摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。但網格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬...
閱讀 702·2021-11-15 11:37
閱讀 3320·2021-10-27 14:14
閱讀 6084·2021-09-13 10:30
閱讀 2967·2021-09-04 16:48
閱讀 1933·2021-08-18 10:22
閱讀 2129·2019-08-30 14:19
閱讀 736·2019-08-30 10:54
閱讀 1751·2019-08-29 18:40
