理解css中Grid布局,在项目中如何实现grid页面布局
简介
使用Gird的好处
1.布局清晰明了,摆脱了模板中使用不同标签下基于浮动,定位的手动计算过程。
2.类似于talbe布局,不同点在于Gird在css中实现,而table在html中实现;同时gird可以根据媒体查询定义不同的上下文,有利于网页响应式设计。
3.摆脱传统布局中文档流的限制,这也意味着可以自由地更改页面元素在html中的位置。
Gird在浏览器的兼容性
从图上可以看出,支持Gird布局的浏览器并不多,IE10以上才支持部分属性,如果想体验Grid布局的强大,推荐使用开通过“体验新功能”的Chrome, Opera 或 Firefox, Chrome:打开浏览器,输入chrome://flags,找到”experimental web platform features”,启用并重启浏览器;Opera:输入opera://flags,与Chrome一样;Firefox:输入layout.css.grid.enabled。
由于Gird兼容性和灵活性不是很高,这就造成了网站上的使用率并不高的原因,当然如果非要使用它又需要向后支持,我们可以利用@supports方法来渐进式增强。
Grid布局的示例源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
* {margin: ;padding: ;}
html,body {width: %;height: %;}
.container {
display: grid;
grid-template-columns: 33.333333% 33.333333% 33.333333%;
grid-template-rows: auto;
}
.item {
background-color: #;
color: #fff;
font-size: %;
padding: 20px;
margin: 3.333333%;
}
.item- {
grid-column-start: ;
grid-column-end: ;
grid-row-start: ;
grid-row-end: ;
}
.item- {
grid-column-start: ;
grid-column-end: ;
grid-row-start: ;
grid-row-end: ;
}
.item- {
grid-column-start: ;
grid-column-end: ;
grid-row-start: ;
grid-row-end: ;
}
</style>
</head>
<body> <div class="container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
<div class="item item-4"></div>
<div class="item item-5"></div>
<div class="item item-6"></div>
<div class="item item-7"></div>
<div class="item item-8"></div>
<div class="item item-9"></div>
<div class="item item-10"></div>
<div class="item item-11"></div>
<div class="item item-12"></div>
</div>
</body>
</html>
效果如下:
源码说明:
一、设置在网格容器上的属性
1. display: grid | inline-grid | subgrid;
属性值:
grid: 生成块级网格
inline-grid: 生成行内网格
subgrid: 如果网格容器本身是网格项(嵌套网格容器),此属性用来继承其父网格容器的列、行大小。
注:当元素设置了网格布局,column、float、clear、vertical-align属性无效。
2. grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
grid-template-rows: <track-size> ... | <line-name> <track-size> ... ;
设置行和列的大小,在行轨道或列轨道两边是网格线。
属性值:
track-size: 轨道大小,可以使用css长度,百分比或用分数(用fr单位)。
line-name: 网格线名字,你可以选择任何名字。
3.grid-template-areas
通过获取网格项中的grid-area属性值(名称),来定义网格模版。重复网格区(grid-area)名称将跨越网格单元格,‘.’代表空网格单元。
属性值:
grid-area-name: 网格项的grid-area属性值(名字)
‘.’ : 空网格单元
none: 不定义网格区域
4. grid-column-gap:<line-size>; 和 grid-row-gap: <line-size> ;
网格单元间距。
属性值:
line-size: 网格线间距,设置单位值。
注:间隔仅仅作用在网格单元之间,不作用在容器边缘。
5. grid-gap:<grid-column-gap> <grid-row-gap>;
是grid-column-gap 和 grid-row-gap简写,
注:如果只设置一个值,那么grid-column-gap 和 grid-row-gap都为那个值。
6. justify-items: start | end | center | stretch(默认) ;
垂直于列网格线对齐,适用于网格容器里的所有网格项。
属性值
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满(默认)。
7. align-items: start | end | center | stretch ;
垂直于行网格线对齐,适用于网格容器里的所有网格项。
属性值:
start: 顶部对齐。
end: 底部对齐。
center: 居中对齐。
stretch:填满(默认)。
8. justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;
如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容器,这时候你可以设置网格的对齐方式(垂直于列网格线对齐)。
属性值:
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满网格容器。
space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
space-between: 两边对齐,网格项之间间隔相等。
space-evenly: 网格项间隔相等。
如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容器,这时候你可以设置网格的对齐方式(垂直于行网格线对齐)。
属性值:
start: 顶部对齐。
end: 底部对齐。
center: 居中对齐。
stretch: 填满网格容器。
space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
space-between: 两边对齐,网格项之间间隔相等。
space-evenly: 网格项间隔相等。
10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;
自动生成隐式网格轨道(列和行),当你定位网格项超出网格容器范围时,将自动创建隐式网格轨道。
属性值:
track-size: 网格轨道大小,可以是固定值,百分比或者是分数(fr单位)。
11. grid-auto-flow : row(默认) | column | dense ;
在没有设置网格项的位置时,这个属性控制网格项怎样排列。
属性值:
row: 按照行依次从左到右排列。
column: 按照列依次从上倒下排列。
dense: 按先后顺序排列。
办公资源网址导航
https://www.wode007.com
12. grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];
是一种简写形式,设置网格容器所有属性。
属性值:
none: 设置为所有属性的默认值。
<grid-template-rows> / <grid-template-columns>: 设置行和列的值,其他属性为默认值。
<grid-auto-flow> [ <grid-auto-rows> [ / <grid-auto-columns>] ] : 设置网格自动流、网格自动行、网格自动列的值,其他未设置则为默认值。
二、设置在网格项上的属性
1. grid-column-start: <number> | <name> | span <number> | span <name> | auto ;
grid-column-end: <number> | <name> | span <number> | span <name> | auto ;
grid-row-start: <number> | <name> | span <number> | span <name> | auto ;
grid-row-end: <number> | <name> | span <number> | span <name> | auto ;
通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的开始位置,grid-column-end、grid-row-end定义网格项的结束位置。
属性值:
line: 指定带编号或者名字的网格线。
span <number>: 跨越轨道的数量。
span <name>: 跨越轨道直到对应名字的网格线。
auto: 自动展示位置,默认跨度为1。
注:如果未声明grid-column-end或grid-row-end,默认将跨越一个轨道。项目也可以重叠,设置z-index来确定堆叠顺序。
2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;
grid-row: <start-line> / <end-line> | <start-line> / span <value> ;
是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。
3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;
定义网格项名字,以便创建模块(容器属性grid-template-areas来定义模块)。
属性值:
name: 项目名子。
<row-start> / <column-start> / <row-end> / <column-end>: 可以是数字或网格线名字。
4. justify-self: justify-self: start | end | center | stretch;
定义单个网格项垂直于列网格线的对齐方式。
属性值:
start: 网格区域左对齐。
end: 网格区域右对齐。
center: 网格区域居中。
stretch: 网格区域填满。
提示:也可以在容器上设置justify-items,达到全部网格项对齐。
5. align-self: start | end | center | stretch;
定义单个网格项垂直于行网格线的对齐方式。
属性值:
start: 网格区域顶部对齐。
end: 网格区域底部对齐。
center: 网格区域居中。
stretch: 网格区域填满。
理解css中Grid布局,在项目中如何实现grid页面布局的更多相关文章
- 解决tomcat下面部署多个项目log4j的日志输出会集中输出到一个项目中的问题
在一次项目上线后,发现了一个奇怪的问题,经过对源码的阅读调试终于解决,具体经过是这样的: 问题描述:tomcat7下面部署多个项目,log4j的日志输出会集中输出到一个项目中,就算配置了日志文件的绝对 ...
- Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图(转载)
Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图 2017年04月05日 10:53:13 李学凯 阅读数:104997更多 所属专栏: Intellij Idea ...
- 深入理解 CSS(Cascading Style Sheets)中的层叠(Cascading)
标题中的 Cascading 亦可以理解为级联. 进入正文,这是一个很有意思的现象.可以直接跳到 总结一下 部分,看完再回过头来阅读本文. 引子 假设我们有如下结构: <p class=&quo ...
- vue 项目中的坑 在项目中遇到 持续更新ing
1.vue2.0 不支持 v-html 后绑定的内容使用过滤,可是有时候过滤必须使用-----------解决:通过methods中定义方法 然后 v-html='myMethods(string)' ...
- 在eclipse中如何在大量项目中查找指定文件
在eclipse中如果希望在大量的项目中寻找指定的文件可不是一件轻松的事,还好eclipse提供了强大的搜索功能. 我们可以通过通配符或正则表达式来设定查寻条件,下面是操作示例: ctrl+h 打开搜 ...
- 在eclipse中如何在大量项目中查找指定文件(转载)
转载:http://blog.csdn.net/inowcome/article/details/6699227 在eclipse中如果希望在大量的项目中寻找指定的文件可不是一件轻松的事,还好ecli ...
- TP v5中环境变量在项目中的应用
环境变量,顾名思义就是在不同的系统环境,同一个变量的值可以有所不同. 如开发环境.测试环境与正式环境下,数据库配置.静态资源文件Url前缀.缓存.各种key等配置都不相同,对于提交到仓库中的代码,理论 ...
- Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图
Maven 组件界面介绍 如上图标注 1 所示,为常用的 Maven 工具栏,其中最常用的有: 第一个按钮:Reimport All Maven Projects 表示根据 pom.xml 重新载入项 ...
- IDEA中的maven web 项目中如何设置自己的本地仓库
我们在创建maven项目的时候如何不使用系统指定的本地仓库,而使用自己设置的仓库呢,这里小女子就来进行讲解一下吧! 讲解一:你要想找到settings.xml你就要自己我去官网上去下载apache-m ...
- (网页)SQLserver中在上线的项目中遇到科学计数法怎么办?
遇到这个问题,首先上线的数据能清除吗?显然是不能的. 1.首先要去找这些科学计数法的数字是哪里来的. 2.怎么在不改变数据的情况下去操作这张表.可以使用convert()转一下Decimal.
随机推荐
- DMR windows 软件x64
解压缩以后,默认使用串口4的USB热点板,用notepad2软件修改MMDVM.ini的呼号,ID,频率,串口号保存在打开DMR.bat即可,晶体有偏移的运行DMR500.bat https://sh ...
- 【Spring注解驱动开发】组件注册-@ComponentScan-自动扫描组件&指定扫描规则
写在前面 在实际项目中,我们更多的是使用Spring的包扫描功能对项目中的包进行扫描,凡是在指定的包或子包中的类上标注了@Repository.@Service.@Controller.@Compon ...
- apollo与springboot集成实现动态刷新配置
分布式apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性. 本 ...
- 由软件构造引申的OOP与POP的心得体会
在大一初学C语言的时候,所解决的问题都是一些轻量级的简单问题,当时写过一个教学管理系统.这个教学管理系统的功能很简单,思想就是“流水线”:按部就班的实现所有流程.要完成整个教学管理系统,实际上就是完成 ...
- git环境配置 | GitHub
注册完GitHub之后,需要配置git,其主要的目的是为了方便文件的上传.下载等. 一. git下载 https://git-scm.com/downloads 在git官网找到相应版本的git下载安 ...
- python+selenium上传本地文件
迅雷号自媒体视频文件自动上传,贴标签发布 难点 本地文件上传,通过send_keys(‘文件路径’)的方式实现上传的目的 文件名通过正则匹配的方式进行处理,主要匹配出中文标题名称 处理过程中文件名称中 ...
- 基于移动最小二乘法的点云曲面拟合(python)
1.移动最小二乘法介绍 为了更好地对数据量大且形状复杂的离散数据进行拟合,曾清红等人[1]开发出一种新的算法——移动最小二乘法.这种新的最小二乘算法为点云数据的处理提供了新的方法.使用点云数据拟合曲面 ...
- 快捷键浏览存储过程的内容(执行文中的User Store Proc,设置快捷方式的指向usp_Name)
虽然不常用,但使用时还是在用传统方法查看存储过程的内容, sp_helptext usp_Name;下面这段执行后可设置快捷查询usp的内容(但是需要在每个数据库下都存在,不能直接在master,并且 ...
- (八)利用 Profile 构建不同环境的部署包
接上回继续,项目开发好以后,通常要在多个环境部署,象我们公司多达5种环境:本机环境(local).(开发小组内自测的)开发环境(dev).(提供给测试团队的)测试环境(test).预发布环境(pre) ...
- loads和dumps的用法
import json s='{"name":"wuxie","sex":"m","data":nu ...