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. 今天和大家分享我学到 ...
随机推荐
- 深度神经网络（DNN）反向传播算法(BP)
在深度神经网络(DNN)模型与前向传播算法中,我们对DNN的模型和前向传播算法做了总结,这里我们更进一步,对DNN的反向传播算法(Back Propagation,BP)做一个总结. 1. DNN反向 ...
- jMeter入门实例
在大家开始看的时候先声明这篇文章不是我写的我只是照着他讲的安装好了,我觉得很有用就想保留下来.分享给大家. 人们对从认识事物都有一个具体到抽象的过程,学习Jmeter也不例外,通过一个实例来进行学习, ...
- 360随身wifi无法使用临时解决方案大全
360随身wifi在绝大多数情况下都是可以正常使用的,但在极少数系统或网络环境下可能会出现异常,如系统服务缺失.公司网络限制.少数校园网客户端限制等等: 360攻城师正在积极努力解决 ...
- [UWP]涨姿势UWP源码——UI布局
懒癌晚期兼正月里都是过年,一直拖到今天才继续更新.之前的几篇介绍了数据的来源,属于准备工作.本篇我们正式开始构建涨姿势UWP程序的UI界面. 我们这个Hello World程序比较简单,总共只有一个页 ...
- NSKeyedArchiver/NSKeyedUnarchiver归档应用（缓存实现）
NSKeyedUnarchiver : 从二进制流读取对象; NSKeyedArchiver :把对象写到二进制流中去. 要实现对数据模型的归档,需要我们实现NScoding协议,(NScoping) ...
- ABP Zero 多租户管理
ABPZero - 多租户管理 启用多租户 ASP.NET Boilerplate和module-zero可以运行多租户或单租户模式.多租户默认为禁用.我们可以在我们的模块PreInitialize方 ...
- 3298: [USACO 2011Open]cow checkers
3298: [USACO 2011Open]cow checkers Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 65 Solved: 26[Su ...
- Tyvj P1813 [JSOI2008]海战训练
P1813 [JSOI2008]海战训练 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 为了准备高层峰会,元首命令武装部队必须处于高度戒备.警察将监视每一条 ...
- jenkins-Couldn't find any revision to build. Verify the repository and branch configuration for this job
参考解决方法: https://issues.jenkins-ci.org/browse/JENKINS-20502 原因分析:jenkins无法准确识别revision 操作方法: 在 branch ...
- Solr commit 策略测试
已知Solr 的Commit策略: 服务器端: 1)AutoCommit 2)AutoSoftCommit 客户端 Commit 本次我测试了客户端关闭Commit的情况下,服务器端Commit策略的 ...