CSS Grid 網格布局

css grid 網格布局

網格布局在二維畫面裡我認為還是非常好用的，所以我打算分享一下我對網格布局的粗淺認知，

所以我打算以乙個簡單地案例加以分析說明情況，

想了想，就用骰子吧，它的六個面很適合做一通詳解

首先，當然是建立總體

然後稍稍分析寫好結構，第乙個因為只有乙個點所以乙個div,第二個有兩個點所以兩個div，第三個有三個點所以三個div。以此類推。

再接著寫用到的用到的選擇器，很容易知道我要用到六個盒子每個面有對應的點數自然也就寫幾個div

準備工作做好，然後開始書寫再box中給長和寬以及邊框，當然弄個圓角可以美化一下，

留出一點空間，然後

轉grid，接著經過分析:

父元素的設定-通過display:grid將盒子轉成網格布局，在通過grid-template-columns和grid-template-rows將盒子設計成三行三列，

用grid-template-areas給每個區域賦予名號；

子元素的設定：因一點在中間，故而grid-area:a5,將div放到中間a5區域，

又因要居中所以在父容器加上justify-items：center以及align-items:center

第二面，當然就好書寫了，首先面一樣大，所以直接寫，注意div

思考得知二點位置a1+a9

然後是三點位置a1+a5+a9

以此類推，書寫好每個面得點數。ok這樣我們就書寫完成了

接下來給大家看一下全部布局、結構以及效果

好了，以上就是我要分享的，我是《逆戰班》幻小夢，粗鄙之見希望可以給大家有所幫助。

謝謝！

CSS Grid 網格 布局

grid template columns grid template rows grid template areas grid template grid column gap grid row gap grid gap justify items align items justify con...

CSS Grid 網格布局

css grid是乙個強大的 web 二維布局工具，能夠以行和列來進行布局 通過設定display的屬性為grid或inline grid來建立網格容器 display grid 預設行排列，寬度為容器的寬度 container複製 圖1 1.png display inline grid cont...

CSS Grid 網格布局

概念 grid布局又稱css網格布局，又名 網格 是乙個二維的基於網格的布局系統，其目的只在於完全改變我們設計基於網格的使用者介面的方式 和grid template columns一起，單位統一 a.fr單位 b.repeat 方法 注 網格中提供了乙個新的單位 fr 比例單位 寫法 例子 12 ...