CSS3中的display:grid网格布局介绍
1.网格布局(grid):
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局;
2.基本概念:
容器和项目,如图所示:
<div class="content"><div class="b">1</div><div class="b">2</div><div class="b">3</div><div class="b">4</div><div class="b">5</div><div class="b">6</div><div class="b">7</div><div class="b">8</div><div class="b">9</div></div>
.content即为容器,.b即为项目。
行和列:
行:row;
列:column;
3.容器属性
display:grid; //默认是块元素;
display:inline-grid; //行内块元素
指定一个容器采用网格布局;
注意:设置为grid后,子元素的float,display: inline-block,display: table-cell、vertical-align和column-*等设置都将失效。
.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;}
4.属性解释
grid-template-columns:定义每一列的列宽;
grid-template-columns:100px 100px 100px; //总共三列,每列列宽是100px;
grid-template-rows:定义每一行的行高;
grid-template-rows:100px 100px 100px; //从上至下,每行高度为100px;
//除了使用像素,还可以使用百分比;
拓展:
重复写值很麻烦,可以用repeate函数;
repeat(次数,大小);
例如:repeat(3,100px); //重复3次,每次100px;
repeat写法:
grid-template-columns:repeat(3,100px);
grid-template-rows:repeat(3,100px);
也可以重复某一种不固定大小模式;
例如:
grid-template-columns:100px 80px 100px;
改写成:
grid-template-columns:repeat(2,100px 80px); //代表重复2次100px 80px的模式;也就是4列;
等同于:
grid-template-columns:100px 80px 100px 80px;
如图:
5.关键字
1,auto-fill;如果容器大小不固定,项目大小固定,可以用auto-fill关键字自动填充;
.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: repeat(auto-fill, 100px);
}
2,fr(fraction):如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。
.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 1fr 2fr;grid-template-rows: repeat(3, 100px 80px);
}
fr也可以和px配合使用;
.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 400px 1fr 2fr;
}
3.minmax();
grid-template-columns: 1fr 5fr minmax(100px, 1fr);
解释:第一列是1fr,第二列是5fr,第三列最小值是100px,最大是1fr。当第二列fr无限大时和第三列到100px时,会往第一列借值;
.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 1fr 5fr minmax(100px, 1fr);
}
4.auto:自适应;
.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px auto 100px;
}
6.网格线名称:
.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
解释:指定每一根网格线的名字,方便以后的引用。
也可以有多个名字;[c1,c1a]
7.间距
row-gap:行间距;
.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;row-gap: 20px;
}
row-gap:colum-gap:列间距;
.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;column-gap: 20px;
}
简写:
gap:20px 20px;
row-gap和column-gap简写形式;
gap省略了第二个值,浏览器认为第二个值等于第一个值。
8.区域
grid-template-areas:网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-areas: 'a b c' 'd e f' 'g h i';}
9.放置顺序:
grid-auto-flow:划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行;
默认是row;
.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a b c' 'd e f' 'g h i';grid-auto-flow: column;}
10.单元格水平位置与垂直位置
justify-items:属性设置单元格内容的水平位置(左中右);
align-items:属性设置单元格内容的垂直位置(上中下);
- start:对齐单元格的起始边缘。
- end:对齐单元格的结束边缘。
- center:单元格内部居中。
- stretch:拉伸,占满单元格的整个宽度(默认值)。
简写:place-items;
place-items: align-items justify-items
11.整体内容的位置:
justify-content:整个内容区域在容器里面的水平位置(左中右);
align-content:整个内容区域的垂直位置(上中下)。
.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-content: center;align-content: center;}
简写:place-content;
place-content:align-content justify-content;
CSS3中的display:grid网格布局介绍相关推荐
- display:grid 网格布局的基础使用
css新特性--网格布局 我们通过在元素上声明 display:grid 来创建一个网格容器.一旦我们这样做,这个元素的所有直系子元素将成为网格元素. 它将元素分割成行与列,通过栅格栏的形式弥补了fl ...
- display:grid 网格布局
一.第一个示例了解网格布局 <!DOCTYPE html> <html> <head> <style> .item1 {grid-area: myAre ...
- 《十二》CSS3 Grid 网格布局
网格布局将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局. Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作是一维布局.适用于一个方向上的布局. Grid布 局则是将容 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- CSS Grid 网格布局全解析
一.介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情 ...
- CSS Grid 网格布局完整教程
前言 一.概述 二.基本概念 2.1 容器和项目 2.2 行和列 2.3 单元格 2.4 网格线 三.容器属性 3.1 display 属性 3.2 行与列属性定义 明文定义 百分比定义 repeat ...
- 轻松上手CSS Grid网格布局
今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...
- CSS Grid网格布局详解
Grid 布局又称网格布局,是W3C提出的一个二维布局系统,它与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别.Flex 布局是轴线布局,只能指定" ...
- HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局 一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值 设置子项的布局方向(写在父容器上) 3. ...
最新文章
- android:windowSoftInputMode属性
- 运用PFA的路灯指示牌GUI程序
- 7-3 最短路径 (20 分)(分支限界+思路+详解)
- Spring Security记住我功能之潜在的账号盗取风险
- sklearn中CountVectorizer与TfidfVectorizer区别
- mysql undo损坏_当数据库没有备份,redo或undo损坏
- 8法则的挑战:长尾理论与长尾效应
- 打印机如何打印白色_打印机可以打印白色吗?
- 软件开发中的CI、CD、CD概念
- 在WinServer上安装小红伞杀毒软件的经验总结
- Java 操作SSH2实现远程执行linux命令
- 信号的基本概念及分类
- c调python_C调和弦及组成音
- angular js 循环数据(死数据) 添加数据 隔行换色 单个删除 排序
- 国企社招很少计算机岗位,为什么国企几乎都是校招,很少有社招呢?
- 初览spring boot读后感
- vscode配置OpenGL开发环境【详细】
- 电脑使用技巧(持续更新)
- Vue 服务端渲染 预渲染
- python中空格键怎么写_如何用python通过空格键移动海龟
热门文章
- 博科查看光功率_法拉第旋光器:非互易性旋转光的偏振
- class对象和class文件_Class文件格式
- sony z2 android 5.0,索尼Xperia Z2 5.0 root教程_索尼Z2获取5.0系统的root
- ctr多少正常_亚马逊广告ctr多少才算合格,如何提升亚马逊CTR
- jquery 获取 A 标签 超级链接属性
- MSP430F5529 DriverLib 库函数学习笔记(八)模数转换模块(ADC12)
- mysqld命令相关介绍
- mac无法ssh localhost
- python多线程编程(1): python对多线程的支持
- 深入react技术栈(2):JSX语法