Grid布局介紹
Grid布局
CRMEB
2022-08-09
13259
1. 什么是Grid布局
Grid布局及網格布局，是一種新的css模型，一般是將一個頁面劃分成幾個主要的區(qū)域，定義這些區(qū)域的大小、位置和層次等關系，是目前唯一一種css二維布局。
2. 和flex布局的區(qū)別
Grig布局和flex布局時有實質性的區(qū)別的，flex是一維布局，只能處理一個維度上的布局，一行或者是一列，但是Grid布局是二維布局，將容器劃分成了“行”和”列”，產生了一個個的網格，可以將網格元素放在行和列相關的位置上，從而達到了布局的目的。
flex布局示例：
grid布局示例：
3. grid布局的概念
首先我們先看一個小例子，通過這個例子演示一些基礎概念
運行結果：
容器和項目
我們通過再元素上聲明display:grid或者display:inline-grid來創(chuàng)建一個容器網格，這個元素的所有直系3子元素將成為網格項目。
網格軌道
grid-template-columns和grid-template-rows屬性來定義網格中的行和列
網格單元
一個網格單元是在一個網格元素中最小的單位，上圖中One、Two、Three、Four…都是一個個的網格單元
網格線
劃分網格的線即為網格線。需要注意的是，我們定義網格的時候，定義的是網格軌道。Grid會自動創(chuàng)建編號的網格線來定位每一個元素，m列有m+1根垂直的網格線，n行有n+1根水平網格線。一般而言，是從左到右，從上到下，1，2，3進行編號排序，從右到左，從下到上，則是按照-1，-2，-3…順序進行編號排下序。
如果您想了解更多前端問題，可關注CRMEB,CRMEB專注于移動互聯(lián)網軟件設計、研發(fā)、銷售為一體的高新技術企業(yè)，我們將竭誠為您服務。
官方公眾號
近期文章
熱門標簽
商城系統(tǒng)
行業(yè)新聞
CRMEB
私域
電商平臺
社交電商
知識付費
網上零售商城
澎湃新聞
分銷商城
技術分享
多商戶商城系統(tǒng)
微商城
微信商城
電商運營
小程序
常見問題
多商戶系統(tǒng)
微分銷
社區(qū)電商
微信小程序
直播商城系統(tǒng)
CRMEB Pro
眾邦科技
直播商城
微信分銷系統(tǒng)
陀螺匠·企業(yè)助手
CRMEB Pro版
經濟觀察網
營銷策略
CRMEB多商戶Java版
品牌營銷策劃
私域運營
微信商城系統(tǒng)
開源打通版
CRMEB標準版
單商戶商城系統(tǒng)
CRMEB 標準版
中國經濟網
社區(qū)團購
CRMEB 多商戶
微信公眾號
開源商城
小雯聊電商
市場營銷
私域電商
私域流量
開源項目
中國網
品牌營銷
