当前位置：网站首页>Grid 布局介绍

Grid 布局介绍

2022-08-08 16:08:00 【InfoQ】

1. 
什么是 Grid 布局
Grid 布局及网格布局，是一种新的 css 模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种 css 二维布局。
2.
 和 flex 布局的区别
Grig 布局和 flex 布局时有实质性的区别的，flex 是一维布局，只能处理一个维度上的布局，一行或者是一列，但是 Grid 布局是二维布局，将容器划分成了 “行” 和” 列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。
flex 布局示例：

null
grid 布局示例：

null
3.
 grid 布局的概念
首先我们先看一个小例子，通过这个例子演示一些基础概念

null

null
运行结果：

null
容器和项目
我们通过再元素上声明 display:grid 或者 display:inline-grid 来创建一个容器网格，这个元素的所有直系 3 子元素将成为网格项目。
网格轨道
grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列
网格单元
一个网格单元是在一个网格元素中最小的单位，上图中 One、Two、Three、Four… 都是一个个的网格单元
网格线
划分网格的线即为网格线。需要注意的是，我们定义网格的时候，定义的是网格轨道。Grid 会自动创建编号的网格线来定位每一个元素，m 列有 m+1 根垂直的网格线，n 行有 n+1 根水平网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序，从右到左，从下到上，则是按照 -1，-2，-3… 顺序进行编号排下序。

null
 
源码附件已经打包好上传到百度云了，大家自行下载即可～
链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27
百度云链接不稳定，随时可能会失效，大家抓紧保存哈。
如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

演示地址

前台演示地址：
http://mer.crmeb.net
后台演示地址：
http://mer.crmeb.net
/admin
原网站

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://xie.infoq.cn/article/b0c2713d1730fbd80bbb6e975

边栏推荐

猜你喜欢

随机推荐