百搜论坛欢迎您的加入!
adimg adimg
 
昨日:篇  今日:篇   总帖:篇   会员:
CRMEBLv12 
Grid 布局介绍     

1. 什么是 Grid 布局

Grid 布局及网格布局,是一种新的 css 模型,一般是将一个页面划分成几个主要的区域,定义这些区域的大小、位置和层次等关系,是目前唯一一种 css 二维布局。

2. 和 flex 布局的区别

Grig 布局和 flex 布局时有实质性的区别的,flex 是一维布局,只能处理一个维度上的布局,一行或者是一列,但是 Grid 布局是二维布局,将容器划分成了 “行” 和 列,产生了一个个的网格,可以将网格元素放在行和列相关的位置上,从而达到了布局的目的。

flex 布局示例:

grid 布局示例:

3. grid 布局的概念

首先我们先看一个小例子,通过这个例子演示一些基础概念

运行结果:

容器和项目

我们通过再元素上声明 display:grid 或者 display:inline-grid 来创建一个容器网格,这个元素的所有直系 3 子元素将成为网格项目。

网格轨道

grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列

网格单元

一个网格单元是在一个网格元素中最小的单位,上图中 OneTwoThreeFour 都是一个个的网格单元

网格线

划分网格的线即为网格线。需要注意的是,我们定义网格的时候,定义的是网格轨道。Grid 会自动创建编号的网格线来定位每一个元素,m 列有 m+1 根垂直的网格线,n 行有 n+1 根水平网格线。一般而言,是从左到右,从上到下,1,2,3 进行编号排序,从右到左,从下到上,则是按照 -1,-2,-3… 顺序进行编号排下序。

 

源码附件已经打包好上传到百度云了,大家自行下载即可~

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27

百度云链接不稳定,随时可能会失效,大家抓紧保存哈。

如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

演示地址

前台演示地址:http://mer.crmeb.net

后台演示地址:http://mer.crmeb.net/admin

 0  已被阅读了1124次  楼主 2022-08-09 14:21:02
回复列表

回复:Grid 布局介绍

联系站长 友链申请桂ICP备19000949号-1     桂ICP备19000949号-1
您的IP:54.81.136.84,2024-03-29 20:22:33,Processed in 0.03343 second(s).
免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。
Powered by HadSky 7.12.9
已有0次打赏
(0) 分享
分享
取消
免责声明
1、本站资源,均来自网络,版权归原作者,所有资源和文章仅限用于学习和研究目的 。
2、不得用于商业或非法用途,否则,一切责任由该用户承担 !
如果觉得本文还不错请点个赞或者打赏点轻币哦~
拒绝伸手党,拿走请回复,尊重楼主,尊重你我他~

侵权删除请致信 E-Mail:207882320@qq.com