css grid布局的首次使用
首先来看一下效果图
接下来废话不多说，先上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 610px;
height: 610px;
margin: 100px auto;
display: grid;/* 说明以grid布局 */
grid-template-columns: 200px 5px 200px 5px 200px;/* 网格划分为五列，包括间隔 */
grid-template-rows: 200px 5px 200px 5px 200px;/* 网格划分为五行，包括间隔 */
}
.a{
grid-column-start: 1;/* 单元格开始的那条列线 */
grid-column-end: 2;/* 单元格结束的那条列线 */
grid-row-start: 1;/* 单元格开始的那条行线 */
grid-row-end: 4;/* 单元格结束的那条行线 */
background: #5a5eff;
}
.b{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background: #F672E2;
}
.c{
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
background: #FDF505;
}
.d{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #F90B0B;
}
.e{
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 6;
background: #41a8ff;
}
.f{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 5;
grid-row-end: 6;
background: #10FDD0;
}
.g{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
background: #16FA07;
}
</style>
</head>
<body>
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
</div>
</body>
</html>
代码就这么多，还是挺简单的。
网格如下划分成五列，则用了6条列线
划分为五行，则用了6条行线
（请随意吐槽这张图片）
主要可以参考，http://www.tuicool.com/articles/F3mMJzv，里面有较详细的说明，图片也比较清晰，个人推荐可以参考一下
结合这张图片，应该很好理解的
还是很容易理解 的。
css grid布局的首次使用的更多相关文章
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...
- 快速使用CSS Grid布局，实现响应式设计
常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...
- CSS Grid 布局
CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...
- CSS Grid布局指南
简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- 5分钟学会 CSS Grid 布局
欢迎加入前端交流群交流知识&&获取视频资料:749539640 这是一篇快速介绍网站未来布局的文章. Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工 ...
- css Grid布局
CSS Grid 布局完全指南(图解 Grid 详细教程)https://www.html.cn/archives/8510#prop-grid-gap 5分钟学会 CSS Grid 布局https: ...
- 带你入门 CSS Grid 布局
前言 三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
- 用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
随机推荐
- Dynamics CRM 2015-Form之控制Ribbon Button
在上一篇中,我用一个例子,简单介绍了如何添加Ribbon Button,以及如何理解RibbonDiffXml,对这方面还不清楚的,可以先看看这篇博文:Dynamics CRM 2015-Form之添 ...
- $.each()遍历json数据
var json = [ {"id":"1","tagName":"apple"}, {"id":& ...
- IE浏览器和CSS盒模型
网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 盒子模型是CSS中一个重要的概念,理解了盒子模型才 ...
- Java之路——敬JAVA初学者（作者：MoMo）
作为一名大四的毕业生,大学三年过,有得有失.作为一个喜欢编程,喜欢JAVA的人,自学其实是一件美事,很有意思的事.要是能再找个女朋友一起学.嘿嘿,就不枉在大学走了一遭啊! 要离开学校了,还是想留 ...
- java学习笔记——IO部分（遍历文件夹）
用File类写的一个简单的工具,遍历文件夹,获取该文件夹下的所以文件(含子目录下的文件)和文件大小: /** * 列出指定目录下(包含其子目录)的所有文件 * @author syskey * */ ...
- C# 运行时通过鼠标拖动改变控件的大小
来源:http://blog.csdn.net/yanleigis/article/details/1819447 using System; using System.Collections.Gen ...
- Pin学习笔记--安装及一些基本知识
具体请见用户手册Pin 3.2 User Guide https://software.intel.com/sites/landingpage/pintool/docs/81205/Pin/html/ ...
- Dijkstra算法——单源最短路径问题
学习一个点到其余各个顶点的最短路径--单源最短路径 Dijkstra算法是由荷兰计算机科学家狄克斯特拉于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向 ...
- android保存照片到相册的一些事
由于最近工作需求的原因,有一个功能就是将webView里面的照片保存到本地,并且能够直接在相册中有一个及时的反馈. 项目中,具体是实现流程是这样的设计webview点击交互事件,当点击webview中 ...
- c3p0获取连接Connection后的Close()---释疑
论题: java c3p0获取连接Connnection 之后, 调用 con.close( ) 是否真的关闭了物理连接 ? 简答: c3p0采用连接池, 目的就是提前预置一定数量的连接, 在使用时候 ...