html grid布局,css grid布局使用
Note:设置网格布局后,容器子元素(项目)的float、display:inline-block、 display:table-cell、 vertical-align 和Column-*等设置都将失效
2、grid-template-columns 属性
grid-template-rows属性
容器指定网格布局以后,接着就要划分行和列. gri-template-columns属性定义每一列的列宽 ,grid-template-rows 属性定义每一行行高
1 .contain{
2 display:grid;
3 grid-template-rows: 100px 100px 100px;
4 grid-template-columns:100px 100px 100px;
5 }
(1) repeat()
参数重复写非常麻烦,可以使用repeat()函数,简化重复值, repeat()接受两个参数,第一个参数是重复次数,第二个参数是重复值
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(4,33%);
4 grid-template-columns:repeat(3,33%);
5 }
6 //或
7 .contain{
8 display:grid;
9 grid-template-rows: repeat(4,100px 20px 80px);
10 grid-template-columns:repeat(4,100px 20px 80px);
11 }
(2) auto-fill 关键字
有的时候单元格大小是固定,但是容器的大小不确定。如果希望每一行(或没一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字
(3) fr关键字
网格布局提供fr关键字(fraction的缩写,意为“片段”) 。如果两列宽度为1fr 和2fr,就表示后面是前者的两倍
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(4,100px);
4 grid-template-columns:repeat(3,1fr);
5 }
(4)minmax()
minmax()函数产生一个长度范围,表示长度在这个范围之内,它接受两个参数,分别最小值和最大值
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(5,100px);
4 grid-template-columns:1fr 1fr minmax(300px, 1fr);;
5 }
(5)auto 关键字
auto 关键字表示由浏览器自己决定长度
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(5,100px);
4 grid-template-columns:200px auto 200px;
5 }
(6)网格线名称
grid-template-columns 属性 和grid-template-rows 属性里面,还可以使用方括号,指定每一根网格的名称,方便以后的引用
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(5,100px);
4 grid-template-columns:[c1] 100px [c2] 100px [c3] auto;
5 }
Note:网格布局允许同一条线多个名字比如 [c1 c2]
(7) 布局实例
grid-template-columns 属性 和grid-template-rows 属性 值可以使用百分比
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(5,100px);
4 grid-template-columns:70% 30%;
5 }
3.grid-row-grap属性 grid-column-gap属性 grid-gap属性
grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列间隔(列间距)
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(5,100px);
4 grid-template-columns:200px 200px 200px;
5 grid-row-gap: 20px;
6 grid-column-gap: 20px;
7 }
Note:grip-gap 属性 grip-row-gap 和 grip-column-gap的合并写法
grip-gap:
4、grid-template-areas 属性
网格布局允许指定 "区域"(area),一个区域由单个或多个单元格组成,grid-template-areas属性用于自定义区域
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(5,100px);
4 grid-template-columns:200px 200px 200px;
5 grid-gap: 10px 30px;
6 grid-template-areas: 'a a a' 'b c d' 'e f g' ;
7 }
5、grid-auto-flow 属性
划分网格以后,容器的子元素会按照顺序,自动放置在每一块网格。默认的放置顺序是先行后列,即先填满第一行,在开始放入第二行
Note: grid-auto-flow 属性决定,默认值 row ,即先行后列。也可以设置成cloumn ,变成先列后行
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(5,100px);
4 grid-template-columns:200px 200px 200px;
5 grid-gap: 10px 30px;
6 grid-template-areas: 'a a a' 'b c d' 'e f g' ;
7 grid-auto-flow:row;
8 }
9
10
11 /* 或 */
12 .contain{
13 display:grid;
14 grid-template-rows: repeat(5,100px);
15 grid-template-columns:200px 200px 200px;
16 grid-gap: 10px 30px;
17 grid-template-areas: 'a a a' 'b c d' 'e f g' ;
18 grid-auto-flow:column;
19 }
Note:grid-auto-flow属性除了设置成row 和 column ,还可以设置成 row dense 和 cloumn dense 。这两个值主要用于项目指定位置以后剩余位置的排列方式
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(5,100px);
4 grid-template-columns:200px 200px 200px;
5 grid-gap: 10px 30px;
6 grid-auto-flow:column dense;
7 //或
8 //grid-auto-flow:row dense
9 }
6、 justify-items属性 align-items属性 place-items属性
justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下)
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(5,100px);
4 grid-template-columns:200px 200px 200px;
5 grid-gap: 10px 30px;
6 grid-auto-flow:column dense;
7 justify-items: end;
8 align-items:end;
9 //或 place-items:end end;
10 }
Note:pace-items 属性 是align-items属性和justify-items属性合并写法
如果第二个值省略,默认与第一个值相等
7、justify-content 属性内容区域水平位置(左中右),align-content 属性内容区域垂直位置(上中下),
start:对齐容器的起始边框。
end - 对齐容器的结束边框。
center - 容器内部居中。
space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(5,100px);
4 grid-template-columns:200px 200px 200px;
5 grid-gap: 10px 30px;
6 grid-auto-flow:column dense;
7 justify-content: end;
8 align-items: end;
9 //place-content: end start;
10 }
Note: place-content: align-content属性 和 justify-content属性的简写
8、grid-auto-columns 属性, grid-auto-rows 属性 浏览器用来设置多余网格列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。
1 .contain{
2 display:grid;
3 grid-template-rows: repeat(3,100px);
4 grid-template-columns:200px 200px;
5 grid-auto-rows: 300px;
6 }
9、grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。
二、项目属性
1、项目位置可以指定,具体方法就是指定项目四个边框,分别定位在哪根线上
gird-column-start 属性 :左边框所在垂直网格线
grid-column-end 属性 :右边框所在垂直网格
grid-row-start 属性 :上边框所在水平网格
grid-row-end 属性 :下边框所在水平网格
1 .bgcolor2{
2 grid-column-start: 1;
3 grid-column-end: 2;
4 grid-row-start: 2;
5 grid-row-end: 4;
6 }
(1) span 关键字
这四个属性可以使用span 关键字,表示“跨越”,即左右边框(上下边框)跨越多少个网格
1 .grid1{
2 background-color: aliceblue;
3 grid-column-start: span 3;
4 }
Note :这四个属性产生项目的重叠,使用z-
2.grid-column属性 ,grid-row 属性
grid-column属性是 grid-colum-start属性 和gird-column-end属性的合并简写
grid-row 属性是 grid-row-start属性 和grid-row-end 属性的合并写法
1 .grid2{
2 background-color: aqua;
3 grid-column: 1 / 3;
4 grid-row:1 / 3;
5 }
6 //等价于
7 .grid2{
8 background-color: aqua;
9 grid-column-start:1;
10 grid-column-end:3;
11 grid-row-start:1;
12 grid-row-end: 3;
13 }
Note:斜杆以及后面可以省略,默认跨域一个网格
3、grid-area属性 指定项目放在哪一个区域
1 .grid2{
2 background-color: aqua;
3 grid-area: e;
4 // grid-area: 2 / 1 / 3 / 4;
5 }
Note:grid-area属性还可以用作grid-row-start 、 grid-column-start 、grid-row-end 、 grid-column-end 的合并简写直接指定项目位置
grid-area: / / / ;
4、justify-self 属性,align-self熟悉, place-self属性
justify-self属性,设置单元格内容的水平位置(左中右),和justify-items属性用法一致但只用于单个项目
align-self属性,设置单元格内容垂直位置(上中下),和align-items属性用法一致,也只用于单个项目
(1)这两个属性都可以去四个值
start:对齐单元格起始边缘
end:对其单元格结束边缘
center:单元格内部居中
stretch:拉伸,占满整个单元格(默认值)
1 .grid2{
2 background-color: aqua;
3 justify-self: stretch;
4 align-self: center;
5 //place-self:stretch center;
6 }
Note:place-self 属性是 align-self属性 和justify-self属性合并写法
如果第二个值省略则会认为两个值相等。
标签:rows,布局,grid,columns,template,200px,css,属性
来源: https://www.cnblogs.com/hongding/p/11332395.html
html grid布局,css grid布局使用相关推荐
- css什么是自适应布局,css 自适应布局阮一峰
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
- html圣杯布局,css圣杯布局和双飞翼布局
双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 圣杯布局 html结构 center left right css 先写出大概的样式.article ...
- html5多行布局,css常用布局多行多列
CSS布局常用的方法:float : none | left | right 取值: none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工 ...
- css什么是自适应布局,CSS自适应布局思路
最近在做一个自适应布局的项目,所以学了下自适应,下面是总结.此总结只做效果,不关注效率和代码优化. 1.css3 html中添加 css中的整体布局 CSS Code复制内容到剪贴板 @mediasc ...
- html表格左右布局,css table布局大法,解决你大部分居中、多列等高、左右布局的问题...
1.table的一些特性与表现形式 虽然table布局因为它的一些非语义化.布局代码冗余,以及不好维护改版等缺点被赶出了布局界.但是在css不给力时期,table布局也曾风靡一时,就算现在看来tabl ...
- css什么是自适应布局,CSS自适应布局
今天小编介绍自适应布局实现方法的demo, 1)左侧固定宽度,右侧自适应,随着窗口的宽度而变化: 2)右侧固定宽度,左侧自适应: 3)中间自适应,两边定宽 1.左定宽 用左侧margin-left设为 ...
- css位置布局,CSS定位布局相关
本文档包括CSS的 样式 定位 框模型 如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动.当文档滚动到超过图像的位置时,图像就会消失. 您可以通过 background-p_w_upload ...
- 翻译 | CSS网格(CSS Grid)布局入门
原文地址:Getting to know CSS Grid Layout 原文作者:Chris Wright 译者:华翔 校对者:珂珂.干干 翻译 | CSS网格(CSS Grid)布局入门 bann ...
- 【CSS 网格布局 (Grid Layout )】
CSS 网格布局 Grid Layout CSS 网格布局 Grid Layout 1. CSS 网格布局的基本概念 1.1 网格 相关术语 1.2 网格布局的 属性分类 2. grid 属性: 同时 ...
最新文章
- 清朝人如何变戏法?带你来看AI修复的1904年老电影(滑稽慎入)
- java redis 下载_redis Java源代码 redis.rar - 下载 - 搜珍网
- python画有权重网络图_python networkx 根据图的权重画图实现
- nova api 分析
- ie浏览器修复_继IE之后,微软要彻底放弃它们了...
- DirectSound学习笔记(3):协作级别
- boost::log::make_exception_handler用法的测试程序
- SparkProgrammingRDDs
- 《java设计模式》之责任链模式
- python爬取网页表格数据匹配,python爬虫——数据爬取和具体解析
- Flutter时间工具类封装
- [EntLib]UAB(Updater Application Block)下载
- 百会项目与redmine的对比
- 华为手机左侧快捷方式,手机桌面太复杂?华为手机自动对齐整理桌面图标方法!...
- linux ping 某个端口,linux 怎么ping 端口
- matlab在非线性动力学,基于Matlab的非线性动力学系统分析
- Android 画笔功能
- 45个免费LOGO在线制作网站
- .NET 中的 GAC
- 万能设配器代码 带加载更多
热门文章
- 【Android 逆向】ELF 文件格式 ( ELF 文件简介 | ELF 文件结构 )
- 【Android 启动过程】Activity 启动源码分析 ( AMS -> ActivityThread、AMS 线程阶段 )
- 【Java 虚拟机原理】垃圾回收算法( Java VisualVM 工具 | 安装 Visual GC 插件 | 使用 Java VisualVM 分析 GC 内存 )
- go语言中将函数作为变量传递
- mysql decode encode 乱码问题
- img标签使用默认图片的一种方式
- GeoServer 常见问题总结
- 携程CEO称成功来自传统营销 B2C已经过时
- 如何写优雅的SQL原生语句?
- [IOI2014]Wall