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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406884.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文件逆顺输出到新文件(三种方案)

方法一:利用递归 /*功能&#xff1a;文件以行为单位&#xff0c;逆顺输出到新文件示例&#xff1a;file1.txt为&#xff1a;123456要求逆顺后输出到文件file2.txt&#xff0c;结果为&#xff1a;563412*/#include <stdio.h> #include <string.h>// 递归读取文件 v…

js实现同时提交多个表单

http://www.jb51.net/article/17284.htm两种方法&#xff1a;1.使用ajax异步提交表单。方法简单&#xff0c;jQuery插件等都能实现。2.使用iframe。方法很原始&#xff0c;较麻烦。更多文章&#xff1a;实现同时提交多个form(基础方法) 收集-http://blog.csdn.net/elifefly/art…

海驾学车过程全揭秘——第九篇:科目三集训及考试

科目二考完之后就去约了科目三&#xff0c;当场定了6.1号&#xff0c;6.2号两天集训&#xff0c;6.2号下午考试。 6.1号&#xff0c;中午赶到驾校&#xff0c;在公告栏找到集训车&#xff0c;然后就找个凉快地方等着了。这时候科目二集训的几个同仁又聚到一起了&#xff0c;一个…

微信小程序知识点GET

1. app.json中的pages用来设置小程序包含哪些页面以及页面的路径、window用来设置默认页面的窗口表现形式、tabBar用来设置小程序底部tab的表现 2. app.js中的App()函数用来注册一个小程序&#xff0c;接受的对象参数用来指定小程序的生命周期函数等&#xff0c;注意App()必须…

CSS3 - 新单位vw、vh、vmin、vmax使用详解(附样例)

关于height:100%和height:100vh的区别 像 px、em 这样的长度单位大家肯定都很熟悉&#xff0c;前者为绝对单位&#xff0c;后者为相对单位。CSS3 又引入了新单位&#xff1a;vw、vh、vmin、vmax。下面对它们做个详细介绍。 一、基本说明 1&#xff0c;vw、vh、vmin、vmax 的…

删除两个双向链表中值相同的结点--无空白头结点

有两个双向链表&#xff0c;头指针为&#xff1a;pListA和pListB&#xff0c;要求删除这两个链表中值相同的结点, C语言实现&#xff0c;结点结构如下&#xff1a; struct node // 双向链表结点 {int key;struct node *front, *next; };完整源代码如下&#xff1a; /*功…

Enze Second day

哈喽&#xff0c;很高兴在云和学院又学了一天的新知识&#xff0c;现在&#xff0c;我来继续总结一下今天所学的以及对昨天的一些补充。 变量 • 声明变量的语法格式:–数据类型 变量名;•赋值: 变量名值;变量的命名 •命名规则&#xff1a;–1 必须以“字母”_或符号开头…

财务管理(Finance Management)

财务管理是指企业为实现良好的经济效益&#xff0c;在组织企业的财务活动、处理财务关系过程中所进行的科学预测、决策、计划、控制、协调、核算、分析和考核等一系列企业经济活动过程中管理工作的全称&#xff0c;其主要特点是对企业生产和再生产过程中的价值运动进行的管理&a…

微信小程序组件知识点GET

1. 可滚动视图区域组件scroll-view 在滚动 scroll-view 时会阻止页面回弹&#xff0c;所以在 scroll-view 中滚动&#xff0c;是无法触发下拉刷新事件 onPullDownRefresh&#xff0c;所以如果一定要使用下拉刷新&#xff0c;请使用页面的滚动&#xff0c;而不是 scroll-view &…

搭建一台本地json服务器

1、全局安装json-server(此时不管在哪个目录下面都可以) 2、cd至当前的项目文件夹所在的位置&#xff0c;新建一个文件夹jsonserver 3、在当前目录下运行npm init 4、再次安装运行 npm install json-server --save 5、此时的目录结构 --jsonserver--node_moduies--package-loc…

删除两个双向链表中值相同的结点--带空白头结点

有两个双向链表&#xff0c;空白头结点为&#xff1a;ListA和ListB&#xff0c;要求删除这两个链表中关键字相同的结点, C语言实现&#xff0c;结点结构如下&#xff1a; view plainstruct node // 双向链表结点 { int key; struct …

寻求空间支持

寻求支持.NET Framework 3.5以及SQL Server的空间&#xff0c;最好有本地磁盘读写权限&#xff08;特定数据目录&#xff09;。

判断浏览器版本语句大全

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]--> <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]--> <!--[…

微信小程序API~GET

框架提供丰富的微信原生API&#xff0c;可以方便的调起微信提供的能力&#xff0c;如获取用户信息&#xff0c;本地存储&#xff0c;支付功能等 1. wx.on 开头的 API 是监听某个事件发生的API接口&#xff0c;接受一个 CALLBACK 函数作为参数。当该事件触发时&#xff0c;会调…

如何用DOS命令批量删除文件?(_desktop.ini 或 thumbs.db)

如何用DOS命令批量删除文件&#xff1f;比如viking蠕虫病毒会在系统里产生大量的“_desktop.ini”文件&#xff0c;虽然杀毒后系统无问题了&#xff0c;但看着总归不爽。我们可使用DOS命令批量删除“_desktop.ini”。 点击“开始”→“运行”&#xff0c;输入&#xff1a;“CMD…

Vue CLI3 开启gzip压缩

gizp压缩是一种http请求优化方式&#xff0c;通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩&#xff0c;可以减小60%以上的体积。 webpack在打包时可以借助 compression webpack plugin 实现gzip压缩&#xff0c;首先需要安装该插件&#xff…