CSS Grid布局入门
相信大家都比较熟悉flex布局了,最近有空研究了波grid布局,感觉虽然兼容性还不是太高,应用不是太普遍,但是功能非常强大。未来应该是grid+flex为主流,grid是二维布局,很灵活,适合整体构架,而flex是一维布局,适合处理局部细节。
介绍
CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统。
兼容性目前不是太友好
和felx类似,grid有
容器
和项目
Grid
容器
属性列表- Grid Container 的全部属性
- display
- grid-template-columns
- grid-template-rows
- grid-template-areas
- grid-template
- grid-column-gap
- grid-row-gap
- grid-gap
- justify-items
- align-items
- justify-content
- align-content
- grid-auto-columns
- grid-auto-rows
- grid-auto-flow
- grid
Grid
项目
的全部属性- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- grid-column
- grid-row
- grid-area
- justify-self
- align-self
被吓到了吗,反正第一次我看是被吓到了,不过没事,下面只会讲解其中常用的
下面栗子均用
.grid_box
,.grid_item
分别指代容器
和项目
,并使用以下html结构
<div class="grid_box">
<div class="grid_item">1</div>
<div class="grid_item">2</div>
<div class="grid_item" id="item3">3</div>
<div class="grid_item" id="item4">4</div>
<div class="grid_item">5</div>
<div class="grid_item">6</div>
<div class="grid_item">7</div>
<div class="grid_item">8</div>
<div class="grid_item">9</div>
<div class="grid_item">10</div>
<div class="grid_item">11</div>
</div>
<span>邻居元素</span>
容器属性
display
- grid - 生成一个块级(block-level)网格
- inline-grid - 生成一个行级(inline-level)网格
- subgrid - 如果容器本身就是一个项目,就可以使用这个属性来表示你想从它的父节点获取它的行/列的大小,而不是指定它自己的大小。
.grid_box {
background: #054154;
display: inline-grid; //行级网络,和span处于一行
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
.grid_box {
background: #054154;
display: grid; //块级网络,将span挤入下一行
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
grid-template-columns / grid-template-rows
- grid-template-rows是行高
.grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
代表第一行高60px,第三行高40px,其他的所有行(不设置或者auto的行)平分剩余高度
- grid-template-columns是列宽
.grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px auto auto;
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
和行高类似,这个代表第一列宽30px,第二列宽20px,第三列第四列平分剩余宽度(和行高不同的是列宽是你设置了多少就会有多少列,列数量和你设置的是相同的)
grid-gap
- 【grid-gap】默认值为0,两个属性的缩写,第一个grid-row-gap(行与行之间的间距),第二个grid-column-gap(列与列之间的间距),只设置了一个值,表示行和列的间距相等*/
.grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px repeat(2,1fr);
grid-gap: 2px 4px; //行间距2px,列间距4px
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
一些语法糖
repeat
- 你可能会问如果中间有很多列/行,每个都写岂不是很麻烦,因此提供了repeat语法糖来简化写法
.grid_box {
grid-template-columns: 30px 20px auto auto;
grid-template-columns: 30px 20px repeat(2,auto);//等价于
}
fr
- 另外,类似flex的1,grid里面也有类似的'份数单位'---
fr
.
.grid_box {
grid-template-columns: 30px 20px auto auto;
grid-template-columns: 30px 20px 1fr 1fr;//等价于
grid-template-columns: 30px 20px repeat(2,1fr);//也等价于
}
minmax
- 最大值最小值
grid-template-rows: minmax(auto, 30%) 1fr 1fr;
表示第一行高最小auto,最大30%
项目属性
grid-area
- 单体操作,控制个体的位置,凌驾于整体规则,4个属性分别是 grid-row-start(开始行线), grid-column-start(开始列线), grid-row-end(结束行线),grid-column-end(结束列线)
- 比如下面用item3来单独操作
.grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px repeat(2,1fr);
grid-gap: 2px 4px;
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
#item3{
grid-area: 1 /1/ 2/ 4;
}
grid-area: 1 /1/ 2/ 4;
代表item3的位置是,行线1到2,列线1到4,这四条线组成的区域即是item3的位置,是不是很强大,太叼了这个
span,负数
- 你可能会问如果中间有很多列/行,那还要去数是第几列线岂不是很麻烦,因此又有了优化
- 和js里的slice类似,负数表示倒数
- 而span表示合并
- 因此本例中,以下都是等价的
#item3{
grid-area: 1 /1/ 2/ 4;
grid-area: 1 /1/ 2/ span 3;//等价
grid-area: 1 /1/ 2/ -2;//等价
}
order
- 如果有两个子项目发生了重叠怎么办呢,就需要order来解决层级问题了。
- 和index类似于z-index,表明叠放顺序,数值越大,越在上。允许负数。
.grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px repeat(2,1fr);
grid-gap: 2px 4px;
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
#item3{
grid-area: 1 /1/ 2/ 4;
order: 1;
}
#item4{
grid-area: 1 /1/ 2/ 4;
}
因为item3有order,所以item3盖住了item4
命名
- 在我看来,命名是grid最强大的地方,你可以在容器里面设置命名,然后在子项目里面使用该命名
- 其中点号
.
代表一个空网格单元 - 比如我们来个常规的布局
<div class="grid_box">
<div class="grid_item" id="header">header</div>
<div class="grid_item" id="aside">aside</div>
<div class="grid_item" id="content">content</div>
<div class="grid_item" id="footer">footer</div>
</div>
<span>邻居元素</span>
.grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px repeat(2,1fr);
grid-gap: 2px 4px;
grid-template-areas: "header header header header" "aside . content content" "footer footer footer footer";
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
#header{
grid-area: header;
}
#aside{
grid-area: aside;
}
#content{
grid-area: content;
}
#footer{
grid-area: footer;
}
是不是很强大
- 另外,网络线也是可以命名的
测试
- 以上就是一些常用的,基础的使用方法,更深入的我们以后再来讨论
- 如果你想检测自己是否基本掌握了grid,可以使用以下的网址测试,是个有趣的小游戏
- 小测试
最后
大家好,这里是「 TaoLand 」,这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……
个人博客:www.yangyuetao.cn
小程序:TaoLand
CSS Grid布局入门的更多相关文章
- 带你入门 CSS Grid 布局
前言 三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
- CSS Grid布局指南
简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...
- 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 布局学习笔记 好久没有写博客了, 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 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
随机推荐
- httpclient httpclient连接回收
httpclient连接释放 httpClient必须releaseConnection,但不是abort.因为releaseconnection是归还连接到到连接池,而abort是直接抛弃这个连接, ...
- windows下运用批处理实现一键自动开启多个应用
工作时,我每天早上到公司,打开自己的电脑,都会有几个固定的软件(myeclipse,飞信,firefox,foxmail等).文件夹和文件需要打开,每天如此,感到很烦,浪费时间做重复的工作,于是想到一 ...
- superobject数组添加json对象,用的是引用
procedure TForm1.Button1Click(Sender: TObject); var ja,jo: ISuperObject; I: Integer; begin ja := SA( ...
- 网络协议栈学习(二)创建 socket
下面通过学习linux 1.2.13源码进一步理解socket通信机制.对该版本源码的学习主要参考<Linux内核网络栈源代码情景分析>(曹桂平 编著). 要理解socket的本质,就要理 ...
- Latex的\cite后面的参考文献显示问号
今天编写Latex的参考文献,发现编译之后参考文献都是问号,很疑惑.网上搜到一个帖子,发现他的问题和我的类似,但他比我还多出一个问题,就是Bibtex按钮是灰色的无法使用. 遇到“看不到Bibtex按 ...
- phpstorm 常用指令
先选中移动内容 块向右移动:Tab键 块向左移动:Shift + Tab键 ctrl+/行注释ctrl+shift+/块注释 ctrl+g跳转行 alt + 上/下 键实现在类中的方法切换ctrl + ...
- php 递归调用又一种方法
public static function encodeXml($data){ $attr = $xml = ""; foreach($data a ...
- 序列化 NSKeyedArchiver,NSPropertyListSerialization
到目前为止,看到oc实现的序列化方式有两种:NSKeyedArchiver,NSPropertyListSerialization. 在这两种序列化方式中,NSData都是序列化的目标.两种方式的不同 ...
- JDK中Integer类的进制转换实现
JDK中关于Integer类的进制转换方法很精巧,具体实现如下: final static char[] digits = { '0' , '1' , '2' , '3' , '4' , '5' , ...
- Python学习(001)--计算机基础
操作系统发展历史 操作系统并不是与计算机硬件一起诞生的,它是在人们使用计算机的过程中,为了满足两大需求:提高资源利用率.增强计算机系统性能,伴随着计算机技术本身及其应用的日益发展,而逐步地形成和完善起 ...