grid 布局（2）

grid区域属性

网格线名称

grid-template-columns 和 grid-template-rows 属性里面，还可以使用方括号指定每一根网格线的名字，方便以后引用

例:

.container{

    display:grid;

    grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];

    grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];

}

上面的代码指定网格布局为 3*3 ，因此会有4根垂直网格线和4根水平网格线

网格布局允许一个网格线上有多个名字，比如[fifth-line row-5];

grid-template-areas 属性

网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。

grid-template-areas属性用于定义区域

.container{

    display:grid;

    grid-template-columns: repeat(3,100px);

    grid-template-rows: repeat(3,100px);

    grid-template-areas:'a b c'

                        'd e f'

                        'g h i';

}
完整代码 
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		#container{

    	display:grid;

    	grid-template-columns: repeat(3,100px);

    	grid-template-rows: repeat(3,100px);

    	grid-template-areas:'a b c'

                        	'd e f'

                        	'g h i';

		}

		#container div{

			font-size: 2em;

			text-align: center;

			color: #222;

			border: 1px solid #222;

		}

		.item1{

			grid-area: i;

			background-color: #ef342a;

		}

		.item2{

			grid-area: h;

			background-color: #f68f26;

		}

		.item3{

			grid-area: g;

			background-color: #4ba946;

		}

		.item4{

			grid-area: f;

			background-color: #0376c2;

		}

		.item5{

			grid-area: e;

			background-color: #c077af;

		}

		.item6{

			background-color: #f8d29d;

			grid-area: d;

		}

		.item7{

			grid-area: a;

			background-color: #b5a87f;

		}

		.item8{

			grid-area: b;

			background-color: #d0e4a9;

		}

		.item9{

			grid-area: c;

			background-color: #4dc7ec;

		}

	</style>

</head>

<body>

	<div id="container">

		<div class="item1">1</div>

		<div class="item2">2</div>

		<div class="item3">3</div>

		<div class="item4">4</div>

		<div class="item5">5</div>

		<div class="item6">6</div>

		<div class="item7">7</div>

		<div class="item8">8</div>

		<div class="item9">9</div>

	</div>

</body>

</html>

上面代码就是9个单元格，子元素虽然是按照1-9的顺序书写的html代码，可是我在每个子元素上设置他们对应的grid-area坐标，他们就会去相应的地点。

实例布局

示例代码 


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		.container{

			display: grid;

			grid-template-columns:repeat(12,1fr);

			grid-template-rows: 50px 200px 50px;

			grid-template-areas:

                                'h h h h h h h h h h h h'

                                'm m m m m m m m m m a a'

                                'f f f f f f f f f f f f';

		}

		.head{

			grid-area: h;

			background-color: #f8d29d;

		}

		.aside{

			grid-area: a;

			background-color: #c077af;

		}

		.main{

			grid-area: m;

			background-color: #4dc7ec;

		}

		.footer{

			grid-area: f;

			background-color: #d0e4a9;

		}

	</style>

</head>

<body>

	<div class="container">

		<div class="head">header</div>

		<div class="aside">aside</div>

		<div class="main">main</div>

		<div class="footer">footer</div>

	</div>

</body>

</html>

通过区域实现的一种响应式布局

在区域中可以使用.这个来占位，代表这个位置没有东西，空白

示例代码


上面的方法通过grid属性模拟栅栏布局，来实现各种功能。而这个响应式的实现，不再是需要使用html+css实现aside的移动，而只需要改变css中的grid-areas属性即可实现

而这样纯css代码实现div的移动，我们可称之为源代码的独立性，即html只是用来标记内容，css来设计样式。

tip:最后补充一点 区域的命名会影响到网格线，每个区域的起始网格线会自动命名为"区域名-start"，终止网格线自动命名为"区域名-end"。

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，在开始放入第二行。

而这个顺序由grid-auto-flow属性决定，默认值是row,及先行后列,也可以将他设成columns，变成"先列后行"。

column : 1 4 7     row : 1 2 3

         2 5 8           4 5 6

         3 6 9           7 8 9

grid-auto-flow属性除了设置成row和column,还可以设成 row dense 和 columns dense。 这两个值主要用于，某些项目指定位置以后，剩下的项目怎么放置

row dense : 先填满横行，尽量不出现空格

column dense : 先填满列，尽量不出现空格

容器内子元素的属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网络线

grid-column-start : 左边框所在的垂直网格线

grid-column-end : 右边框所在的垂直网格线

grid-row-start : 上边框所在的水平网格线

grid-row-start : 下边框所在的水平网格线

例：

	.item1{

		grid-column-start:2;

		grid-column-end:4;

	}

	/*起始于第二根网格线，第四根垂直网格线结束*/

grid 布局（2）的更多相关文章

  1. WPF中Grid布局

    WPF中Grid布局XMAl与后台更改,最普通的登录界面为例. <Grid Width="200" Height="100" > <!--定义 ...

  2. [转]使用CSS3 Grid布局实现内容优先

    使用CSS3 Grid布局实现内容优先  http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...

  3. wpf后置代码中的Grid布局以及图片路径的设置

    之前用Grid练习连连看布局时,遇到了几个困惑.此次就把当时的一些收获写出来,供以后翻看. 图片路径可能比较常用,所以就写在第一个了. 在xaml中,设置图片非常简单,只要把图片拷贝到资源目录(这里假 ...

  4. css grid布局的首次使用

    首先来看一下效果图 接下来废话不多说,先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. 学习ExtJS的grid布局

    这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. ...

  6. CSS字体渐变 & 隐藏浏览器滚动条 & grid布局（转载）

    字体渐变  https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条  https://blog.csdn. ...

  7. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  8. 快速使用CSS Grid布局，实现响应式设计

    常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...

  9. 补发————grid布局

    CSS Grid布局是CSS中最强大的布局系统.与flexbox的一位布局不同的是CSS Grid布局是一个二维布局系统,即它可以同时处理列和行.通过将CSS规则应用于父元素和其子元素,就可以轻松使用 ...

  10. tkinter之grid布局管理器详解

    在很久之前,我发过一篇<tkinter模块常用参数>,里面已经几乎涵盖了tkinter的大部分教程. 好吧,其实也就是上一篇而已啦. 所谓布局,就是指控制窗体容器中各个控件(组件)的位置关 ...

随机推荐

  1. Codeforces_733_C

    http://codeforces.com/problemset/problem/733/C 从后往前一个个b对应一组组a. #include<iostream> #include< ...

  2. 【原创】为什么Mongodb索引用B树，而Mysql用B+树?

    引言 好久没写文章了,今天回来重操旧业.毕竟现在对后端开发的要求越来越高,大家要做好各种准备. 因此,大家有可能遇到如下问题 为什么Mysql中Innodb的索引结构采取B+树? 回答这个问题时,给自 ...

  3. 基于python2+selenium3+pytest4的UI自动化框架

    环境:Python2.7.10, selenium3.141.0, pytest4.6.6, pytest-html1.22.0, Windows-7-6.1.7601-SP1 特点:- 二次封装了s ...

  4. 利用Kubernetes中的leaderelection实现组件高可用

    在Kubernetes中,通常kube-schduler和kube-controller-manager都是多副本进行部署的来保证高可用,而真正在工作的实例其实只有一个.这里就利用到 leaderel ...

  5. 题解 UVA1479 【Graph and Queries】

    \[ \text{Preface} \] 算是一道思维难度稍易,代码难度稍难的题吧. \[ \text{Description} \] 给出一张 \(n\) 个点,\(m\) 条边的图,点带权.需要支 ...

  6. 《 Java 编程思想》CH08 多态

    在面向对象的程序设计语言中,多态是继数据抽象和继承之后的第三种基本特征. 多态通过分离做什么和怎么做,从另一个角度将接口和实现分离开来. "封装"通过合并特征和行为来创建新的数据类 ...

  7. 大神是如何学习 Go 语言之 Channel 实现原理精要

    转自: https://mp.weixin.qq.com/s/ElzD2dXWeldYkJmVVY6Djw 作者Draveness Go 语言中的管道 Channel 是一个非常有趣的数据结构,作为语 ...

  8. [redis读书笔记] 第一部分 数据结构与对象 简单动态字符串

    本读书笔记主要来自于<<redis设计与实现>> -- 黄键宏(huangz) redis主要设计了字符串,链表,字典,跳跃表,整数集合,压缩列表来做为基本的数据结构,实现键值 ...

  9. Pycrypto与RSA密码技术

    密码与通信      密码技术是一门历史悠久的技术.信息传播离不开加密与解密.密码技术的用途主要源于两个方面,加密/解密和签名/验签.   pip install pycrypto RSA 密码算法与 ...

  10. CentOS 7的yum更换为国内的阿里云yum源

    Yellow dog Updater(Yum)是CentOS所有版本的默认包管理器,yum主要功能是更方便的添加/删除/更新RPM包,自动解决包的依赖性问题,便于管理大量系统的更新问题,其理念是使用一 ...