CSS 之Grid网格大致知识梳理1
CSS所提供的关于网格Grid属性让我们可以更方便编写页面以及布局,而它的一些主要应用属性如下:
1.将父容器的display属性值设置为grid 即可将其转换为网格容器;
2.在网格容器中添加列的属性:grid-template-columns;
ag:
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div> <style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;} .container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
/* add your code below this line */
grid-template-columns:100px 100px 100px; /* add your code above this line */
}
</style>
效果:
3.在网格容器中添加行的属性:grid-template-rows;(用法与添加列的方法一致);
4.改变行/列尺寸的单位有:fr :可用区域;auto:自定义尺寸; xxpx:具体的px值;
5.创建空白列宽(列间隙):grid-columns-gap;
ag:以上同一个栗子,修改其父元素contain的属性,代码如下:
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-column-gap:20px; //列宽20px; }
效果如下:
6.创建行间隙:grid-row-gap;(用法同添加列间隙一致);
7.由5,6条综合,为了更方便的创建行间距与列间隙(快捷方式):grid-gap属性;
8.改变一个网格中的一个方格占据的列宽:grid-column;该属性的工作原理:以下的表格中列从左往右数,行从上往下数;
还是以上的栗子,改变其item5的样式:
.item5 {
background: PaleGreen; grid-column:2/4; //从第二条列间隙—第四条,即从第二列到第三列 }
效果如下:
9.改变一个方格的占据行高:grid-row属性;(原理同上);
10.单元格与单元格对齐的属性设置:justify-self;
该属性接收以下参数:stretch:默认填充整个单元格; start:左对齐; center:居中对齐; end:右对齐;
11.单元格与单元格垂直方向对齐设置:align-self属性;(接受的值与垂直方向一致)
12.水平方向上对齐所有的项:justify-items;(接收参数与以上对齐属性接收的值一致);
13.垂直方向上对齐所有的项的属性;align-items;(接收参数与以上对齐属性接收的值一致);
CSS 之Grid网格大致知识梳理1的更多相关文章
- CSS 之Grid 网格知识梳理2
继上篇的CSS 之Grid下半部分 14.将单元格划分到一个区域,使用grid-template-areas属性: ag: grid-template-areas: "header h ...
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- 【CSS】343- CSS Grid 网格布局入门
CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...
- 轻松上手CSS Grid网格布局
今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...
- 从 NavMesh 网格寻路回归到 Grid 网格寻路。
上一个项目的寻路方案是客户端和服务器都采用了 NavMesh 作为解决方案,当时的那几篇文章(一,二,三)是很多网友留言和后台发消息询问最多的,看来这个方案有着广泛的需求.但因为是商业项目,我无法贴出 ...
- css之grid layout代码解释
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr);/*grid-template-columns CSS属性定义了网格列的 ...
- Linux实战教学笔记19:Linux相关网络知识梳理
第十九节 Linux相关网络知识梳理 标签(空格分隔): Linux实战教学笔记-陈思齐 一,前言 一个运维有时也要和网络打交道,所以具备最基本的网络知识,对一个运维人员来说是必要的.但,对于我们的工 ...
- jQuery知识梳理20190818
目录 jQuery知识梳理20190818 1. 时间绑定和解绑 2. 区别mouseover与mouseenter 3. 时间委托(委派/代理) 4 . 多库共存 5.window.onload与$ ...
随机推荐
- 博弈论基础之sg函数与nim
在算法竞赛中,博弈论题目往往是以icg.通俗的说就是两人交替操作,每步都各自合法,合法性与选手无关,只与游戏有关.往往我们需要求解在某一个游戏或几个游戏中的某个状态下,先手或后手谁会胜利的问题.就比如 ...
- centOS7 安装mysql-5.7.20-1.el7.x86_64.rpm-bundle.tar
在虚拟机上安装mysql走了不少弯路,在此备份... 首先感谢下这几篇博客提供的帮助: https://www.cnblogs.com/pythonal/p/6141516.html http://b ...
- python课堂整理18---文件操作(下)
一.b模式,字节方式(二进制的单位),rb wb ab f = open('test.py', 'rb', encoding = 'utf-8') 报错,因为用了b模式,就不能再指定编码格式了,已经指 ...
- linux初学者-DDNS配置篇
linux初学者-DDNS配置篇 如果DNS服务器要记录多台主机的IP,且这些主机的IP都是通过DHCPD服务自动获取的,那么将会造成很大的困难,因为在DNS设置时无法得知主机具体的IP.如果DHCP ...
- 2048 控制台版(C#)
开篇 2048游戏现在很火啊,很多人应该已经玩过了.在博客园上也看见有人模仿做的GDI+版 2048游戏,鄙人暂且不做那么多动画的东西,毕竟是个小东东,在此奉上一个<控制台版2048>. ...
- 前端插件之Select2使用
工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了bootstrap-duallistbox这个插件的使用,这一篇开始Select2的征服之旅 Se ...
- PyCharm 配置 Git 教程
之前给大家介绍了 Git 安装及使用指南,今天再给大家介绍一下在 PyCharm 中使用 Git. 1 打开 File -> Settings -> Version Control -&g ...
- RobotFramework_3.SeleniumLibrary操作(一)
RobotFramework_3.SeleniumLibrary操作(一) *:first-child { margin-top: 0 !important; } body>*:last-chi ...
- 史上最全存储引擎、索引使用及SQL优化的实践
史上最全存储引擎.索引使用及SQL优化的实践 1 MySQL的体系结构概述 2. 存储引擎 2.1 存储引擎概述 2.2 各种存储引擎特性 2.2.1 InnoDB 2.2.2 MyISAM 3. 优 ...
- 使用Minifly打造基于视觉感知的跟踪无人机
前言:无人机和人工智能现在是非常热门的话题,将两者结合起来是一个比较好的创意,本文介绍一种可行的解决方案来实现基于视觉感知的跟踪无人机.从零开始搭建无人机系统工作量和难度(以及钱)都是非常大的,所以在 ...