你真的了解Grid布局吗?
Grid网格布局
概述:Grid将容器划分为一个个网格,通过任意组合不同的网格,做出你想想要的布局
Grid与flex布局相似,将整个Grid分为了容器与子项(格子)
Grid容器的三个重要的概念:
- 行和列
- 单元格
- 网格线
行和列
行和列的概念和栅格系统的的概念相似
单元格在水平方向排成一路为一行
单元格在竖直方向上拍成一路为一列
单元格
作为容器的最小单位,Grid网格由一个个单元格组成
网格线
用来隔开单元格的交叉线。网格线将每一行、每一列的单元格分割成全封闭的矩形
每行、每列网格线的数量是当前行数和列数加一;全封闭嘛
网格线也是控制单元格大小的因素之一;
Grid容器属性(常用的)
1.指定一个Grid容器
display属性值:
grid:指定一个元素采用网格布局,默认情况下容器都是块级元素独占一行
inline-grid:指定为行内Grid
2.设置Grid行数和列数
grid-template-rows: 指定行数
grid-template-columns: 指定列数
先做一个3 x 3的网格
.container{width: 300px; height: 300px; display: grid; grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px; background-color: #123456; margin: 200px; } .container div{width: 100px; height: 100px; background-clip: content-box; padding: 5px; border: 1px solid #fff; background-color: #eee; display: flex; justify-content: center; align-items: center; box-sizing: border-box; }
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>
还可以使用结合属性:grid-template
grid-template: 100px 100px 100px/100px 100px 100px;
新单位fr
fraction 的缩写,意为"片段" 。可以理解为当前单元格所占该行/列的比例、
上述代码可以改为
grid-template-rows: 1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;
如果行数或者列数特别多的情况下,这样写就显得特别的繁琐;
于是乎就有了一个repeat( )函数
grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr);
repeat()
第一个参数是设置行/列数
第二个参数是设置每一行/列所占的当前容器的份额
第二个参数可以填多个值
grid-template-rows: repeat(3,1fr ); grid-template-columns: repeat(3,1fr 50px);
先看结果:
理解:
容器被分为3列,每一列又被分成了 1fr 和50px,也就是说被分为了6列
内容区为1的元素占了 1fr+50px中的 1fr
内容区为2的元素占了 1fr+50px中的 50px
那么问题来了,为什么6是完整的?
其实每一个div都是完整的,只不过2有一半被3遮住了而已
6有一半超出了grid容器
为什么 3 5 9会遮住前一个div呢?
这就要提到网格线的作用了,网格线的作用不仅仅是分割每一个单元格
在分割单元格的同时也规定了每个单一格的水平和垂直方向上的起始位置和结束位置
3的其实位置就是在1fr+50px这里,也就是第二条列网线的位置,结束位置是第三条网格线
审查元素能很好的看的网格线的情况和单元格的分布
minmax( ) 和 auto
auto 单元格宽度/高度自适应
grid-template-rows: repeat(3,1fr ); grid-template-columns: 50px auto 50px;
第二列多余的宽会随这Grip容器的变化而改变
第三列网格线会改变
minmax( ) 单元格宽度/高度在(min,max)范围内
grid-template-rows: repeat(3,1fr ); grid-template-columns: 50px minmax(120px,1fr) 50px;
这里的1fr表示剩余的位置。因为没有别的列占剩余空间。
如果最大值部分超出grip容器的容量,只会分配最大剩余容量
3.grip-gap:设置行/列直接的间隙
grip-gap:5px 5px 行间隙5 列间隙5
简写:grip-gap:5px
你也可以分开写两个属性
grid-column-gap:5px;
grid-row-gap:5px;
4.grid-template-areas:在网格内指定区域
改属性必须配合子项中的grid-area来使用
grid-area:用来规定区域的名字
你可把grid-area当成画布,把grid-area所指定的区域当作画块
通过画块的拼接来获取想要的布局;
你可以轻轻松松的做出如下布局(而且大小可以自适应)
代码如下:
.container{width: 100vw; height: 100vh; display: grid; grid-template: repeat(4,1fr)/repeat(4,1fr); grid-template-areas: "hl m m hr" "hl m m hr" "al al ar ar " "f f f f "; background: #eee; grid-gap: .7em } .container .main{grid-area: m; background-color: #f1c40f } .container .asideL{grid-area: al; background-color: #4ff10f } .container .asideR{grid-area: ar; background-color: #0ff1cb } .container .headerL{grid-area: hl; background-color: #0f26f1 } .container .headerR{grid-area: hr; background-color: #9e0ff1 } .container .footer{grid-area: f; background-color: #f10f1a }
<div class="container"> <div class="main"></div> <div class="headerL"></div> <div class="headerR"></div> <div class="asideL"></div> <div class="asideR"></div> <div class="footer"></div> </div>
突然感觉页面布局居然如此简单
注意:在grid-template-areas内所指定的命名区域必须是矩形,不然浏览器不渲染
grid-template:是grid-template-columns、grid-template-rows和grid-template-areas
5.grid-auto-flow:设置单元格排列的方向。
属性值:
row: 从水平方向自左向右排列(默认)
column:从竖直方向自上向下排列
row dense:从水平方向自左向右排列,自动填补空格,尽可能排满
column dense:从竖直方向自上向下排列,尽可能排满
6.justify-items/align-items:设置单元格内的水平方向/垂直方向对其方式
属性值:
start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部居中。
stretch:拉伸,占满单元格的整个宽度(默认值)
place-items是justify-items与align-items的合并属性
7.justify-content/align-content:设置grid网格内所有单元格水平方向/垂直方向对其方式
属性值:
start:对齐容器的起始边框。
end:对齐容器的结束边框。
center:容器内部居中。
stretch:项目大小没有指定时,拉伸占据整个网格容器。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
space-between:项目与项目的间隔相等,项目与容器边框之间没有间隔。
space-evenly:项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
place-content是align-content和justify-content的合并属性。
Grid项目属性(常用的)
1.grid-column/grid-row:根据网格线来指定单元格位置
background-color: red; grid-column: 2 / 3; grid-row: 1 / 2;
这里的意思是该单元格
X方向上所占的位置是第二根网格线到第三根网格线
Y方向上所占的位置是第一根网格线到第三根网格线
2. grid-area: 指定单元格在那个区域
grid-area:是grid-column/grid-row的合成属性
grid-area: 1/2/2/3;
也可以指定是哪个已命名的区域,配个grid-template-areas使用
3. justify-self/align-self:单元格内容对齐方式
start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部居中。
stretch:拉伸,占满单元格的整个宽度(默认值)。
Grid网格兼容问题:
如果对内容有疑问,欢迎交流讨论
参考链接:
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
https://www.jianshu.com/p/21fc2c091b98
转载于:https://www.cnblogs.com/yongG/p/11511265.html
你真的了解Grid布局吗?相关推荐
- 前端每日实战:143# 视频演示如何用 CSS 的 Grid 布局创作一枚小松鼠邮票
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YOoXpv 可交互视频 此视频是可 ...
- 带你入门 CSS Grid 布局
前言 三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
- [转]使用CSS3 Grid布局实现内容优先
使用CSS3 Grid布局实现内容优先 http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的&l ...
- Grid布局和Flex布局
Flex布局(弹性布局) Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局.行内元素也可以使用Flex布局. 采用Flex布局的元素,称为Flex容器.flex ...
- ext grid 重新布局_如何让你的 CSS Grid 布局有良好的可访问性
稿件来源:阿里云开发者社区(点击下面"了解更多"查看原文) CSS Grid 可以将元素放入有行和列的网格中,从而让创建二维布局成为可能.有了它,你可以自定义网格的任何形态,例如网 ...
- display属性_前端基础:Grid 布局教程,重新复习grid布局的容器和项目属性
链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 一.概述 它将网页划分成一个个网格,可以任意组合不同的网格,做出 ...
- css grid布局
最近在学习css grid布局,为了避免以后忘记了难得查资料,遍写在博客中方便以后查询! 1,display属性 display有三个值, grid :生成一个块级网格 inline-grid :生成 ...
- grid布局浏览器兼容_CSS Grid布局尝试
先看思维导图 起步 首先搭好基本的结构 <div id="container"><div class="item item-1">1&l ...
- Css网格布局-Grid布局
Grid 概念 Grid布局是一种二维布局方法,能够在行和列中布置内容.因此在任何网格中都有两个轴,横轴(即行轴,内联)和纵轴(即列轴,块). 什么是网格 网格是一组相交的水平线和垂直线,它定义了网格 ...
最新文章
- 美国AI博士指出,自学Python到底能做什么
- 【Java】eclipse如何导入项目
- 以为是行废代码,原来有这作用!
- rs232读取智能电表_老王说表之--快速查看家里电表读数的方法
- C和指针之字符操作(<ctype.h>)
- 洛谷-DFS-1101-单词方阵-个人AC题解及公共题解的笔记
- 2021年广西艺术高考成绩查询,2021年广西美术高考成绩查询网址:https://www.gxeea.cn/...
- 习题:Dual Matrices(思路题/分治)
- Resnet-18-训练实验-warm up操作
- ROS 5.12 上自动更新3322.org动态域名
- python uiautomator2 toast_Android自动化测试 - 获取toast提示(Appium+Python+UiAutomator2)
- 帆软:不使用 __parameters__ 传参,问题。
- DELL服务器安装centos系统
- 「自然语言处理(NLP)论文推送」(中文诗歌生成) 上下文增强Transformer【ACL 微信AI团队 北交】
- 安装Cloudera Manager-5.12.2 集成 CHD-5.12.2 问题总结
- IT人二十年后再定位
- 从业17年,聊聊关于测试这件事
- 软件开发中什么是CI/CD
- 南昌航空计算机复试题,【计算机考研】院校信息-南昌航空大学
- php 字体如何加粗和调大小,如何在PHP中使文本变为粗体?
热门文章
- SharePoint 2013 图文开发系列之代码定义列表
- 《OpenCV3编程入门》学习笔记5 Core组件进阶(六)输入输出XML和YAML文件
- C语言程序设计 细节总结(第9章 结构体共用体枚举)
- Linux 常用技巧记录
- 乌鲁木齐网络赛J题(最小费用最大流模板)
- 泰坦尼克号数据集_机器学习(入门)--Kaggle项目之泰坦尼克号
- fc天使之翼2020修改版下载_海岛奇兵无限钻石修改版下载-海岛奇兵无限钻石修改版下载2020...
- 在建工程费用化处理_未确认融资费用和未实现融资收益的含义和区别
- node mysql 模块化_Node.js 模块系统
- 哪种营销方法效果最差_营销软文写作的三大技巧,你知道吗?