强大的display:grid
自从用习惯flex布局我基本已经不怎么使用float了。
现在又出现了grid布局，就像flex的升级版，布局上十分强大。
主要属性：
grid-template-columns：//竖向排列
grid-template-rows：//横向排列
首先比较一下flex和grid实现自适应九宫格，高度800px，宽度适应：
flex
超过一层后样式就复杂了，特别是边框的处理有点复杂。(方法很多，不一一去展示了)。
<html>
<head>
<style type="text/css">
.box {
padding: 10px;
padding-bottom: 0;
padding-right: 0;
display: flex;
flex-direction: column;
height: 800px;
width: calc(100vw - 20px);
background-color: #000;
}
.content {
display: flex;
margin-bottom: 10px;
flex: 1
}
.b {
flex: 1;
margin-right: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
</div>
<div class="content">
<div class="b">4</div>
<div class="b">5</div>
<div class="b">6</div>
</div>
<div class="content">
<div class="b">7</div>
<div class="b">8</div>
<div class="b">9</div>
</div>
<div>
</body>
</html>
grid
真的好用！方法也可以有很多，相对flex而言写起来简单多了哈
<html>
<head>
<style type="text/css">
.content {
padding: 10;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
height: 780px; //padding 有个20的宽度
background-color: #000;
grid-gap: 10px;
}
.b {
background-color: yellow;
}
</style>
</head>
<body>
<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>
</body>
</html>
效果图：
接下来就只讲grid了。
常用属性，属性很多，主要练习下常用的一些属性：
- grid: 1fr 1fr 1fr/1fr 1fr 1fr ; 高度 高度 高度/(一)列 (二)列 (三) 列
grid: 100px 200px 100px /1fr 1fr 1fr;
等于：
grid-template-rows: 100px 200px 100px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: none;
grid-auto-flow: initial;
grid-auto-rows: initial;
grid-auto-columns: initial;
grid-template-columns: 100px 100px; //有几列，每列有多大
grid-template-rows :100px 100px; //有几行，每行有多大
grid-template: [] '1 1 1' 100px [] /auto 50px auto;
//[名称] '几列' 这行的高度 [名称] /三列对应的三个宽度
//（名称可为空 '1 1 1' 就是均分三列）grid-gap: 10px 20px ;//上下间隔10px，左右间隔20px
grid-gap: 10px；//上下左右间隔10px
grid-column-gap
grid-row-gap
justify-items：
start：将内容对齐到网格区域(grid area)的左侧
end：将内容对齐到网格区域的右侧
center：将内容对齐到网格区域的中间（水平居中）
stretch：填满网格区域宽度（默认值）align-items：
start：将内容对齐到网格区域(grid area)的顶部
end：将内容对齐到网格区域的底部
center：将内容对齐到网格区域的中间（垂直居中）
stretch：填满网格区域高度（默认值）justify-items：
start：将网格对齐到 网格容器(grid container) 的左边
end：将网格对齐到 网格容器 的右边
center：将网格对齐到 网格容器 的中间（水平居中）
stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
space-evenly：在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间align-content：
start：将网格对齐到 网格容器(grid container) 的顶部
end：将网格对齐到 网格容器 的底部
center：将网格对齐到 网格容器 的中间（垂直居中）
stretch：调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度
space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
space-evenly：在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间
这是主体上常用的一些属性了，不想做文档解释了。讲属性的文章挺多的，主要就是练习，多用用。
原文：https://www.jianshu.com/p/41c038baf994
强大的display:grid的更多相关文章
- display:grid
使用grid布局 参考资料http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html flex布局还没完全用利索,但这个grid布 ...
- CSS3中的display:grid网格布局介绍
1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...
- 前端CSS3布局display:grid用法
前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...
- 关于display：grid layout
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: min ...
- display：grid
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- css：display：grid布局
简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...
- [转]使用CSS3 Grid布局实现内容优先
使用CSS3 Grid布局实现内容优先 http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...
- grid栅格布局
前面的话 Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格.本文将详细介绍grid布局 引入 对于Web开发者来说,网页布局一直是个比较 ...
- CSS Grid基于网格的二维布局系统(详细教程)
.grid-wrap{ display: inline-flex; padding: 20px; background: #f4f4f4; word-break: initial; } .handle ...
随机推荐
- Authenticator App 两步验证会不会造成亚马逊账号关联？
今天听人说,因为用Authenticator App做亚马逊两步验证造成了帐号关联…… 我给大家解释一下Authenticator的实现原理,作为计算机专业科班出身的我,此次从各方面了解并经过自己亲测 ...
- jmeter 内存溢出原因及解决方法
jmeter是一个java开发的开源性能测试工具,在性能测试中可支持模拟并发压测,但有时候当模拟并发请求较大或者脚本运行时间较长时,压力机会出现卡顿甚至报异常————内存溢出, 这里就介绍下如何解决内 ...
- tar_ssh 配合下载文件（适合于带宽充足传输大量小文件场景）
局域网网速快,但是当要传输大量小文件时倘若仍然使用scp,由于每个文件传输完毕都需要独立进行传输完毕的确认,这样就无法充分利用带宽.一方面等待确认时tcp窗口无法填满,另一方面文件传完之前确认也不会开 ...
- 用于KV集群的一致性哈希Consistent Hashing机制
KV集群的请求分发 假定N为后台服务节点数,当前台携带关键字key发起请求时,我们通常将key进行hash后采用模运算 hash(key)%N 来将请求分发到不同的节点上, 后台节点的增删会引起几乎所 ...
- 025_Excel知识汇总
一.Excel相对引用和绝对应用的区别 加上了绝对地址符“$”的列标和行号为绝对地址,在公式向旁边复制时不会发生变化,没有加上绝对地址符号的列标和行号为相对地址,在公式向旁边复制时会跟着发生变化. 具 ...
- 【python开发】利用PIP3的时候出现的问题Fatal error in launcher: Unable to create process using '"'
down voteaccepted I fixed my issue by... downloading Python 3 at the official website and installing ...
- 【计算机视觉】【神经网络与深度学习】YOLO v2 detection训练自己的数据2
1. 前言 关于用yolo训练自己VOC格式数据的博文真的不少,但是当我按照他们的方法一步一步走下去的时候发现出了其他作者没有提及的问题.这里就我自己的经验讲讲如何训练自己的数据集. 2.数据集 这里 ...
- Oracle和Mysql中的字符串的拼接
SQL允许两个或者多个字段之间进行计算,字符串类型的字段也不例外.比如我们需要 以"工号+姓名"的方式在报表中显示一个员工的信息,那么就需要把工号和姓名两个字符 串类型的字段拼接计 ...
- pdflatex 插入eps图片
1. 将eps图片转成pdf或者将pdf图片转成eps,也就是说一张图片有pdf.eps两种格式.方法一: \includegraphics{pic} %不要扩展名.这样pdflatex自动调相应的p ...
- 09 Spring的依赖注入
1.依赖注入(Dependency Injection) (1)IOC的作用: 降低程序间的耦合(依赖关系)(2)依赖关系的管理: 以后都交给spring来维护 在当前类需要用到其他类的对象,由spr ...