html中grid布局,CSS:玩转grid布局
grid介绍
针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,是一个基于网格的二维布局系统,目的是用来优化用户界面设计。
1.启用grid容器
我们使用display属性来定义一个网格容器,它的grid值决定了容器展现为块级还是内联形式。一旦启用网格容器,它的所有子元素都进入grid文档流,称为网格子项。display: grid | inline-grid | subgridgrid:定义一个块级的网格容器
inline-grid:定义一个内联的网格容器
subgrid:定义一个继承其父级网格容器的行和列的大小的网格容器,它是其父级网格容器的一个子项。
tips: column, float, clear和vertical-align对网格容器没有效果。
2、网格容器的属性
2.1grid-template-columns/grid-template-rows
用法:grid-template-columns: ... | ...;
grid-template-rows: ... | ...;:定义网格单元的宽高,其单位可以是一个长度(如px、em、rem、vw、vh)或百分比,也可以是网格中自由空间的份数(单位为fr)。
:定义网格线的名称,它不是必须值。可以一个你选择的任意名字,当没有显示设定时,它的名字以数字表示。
实例:
css:.container {
width: 500px;
height: 500px;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 33% 33% 33%;
}
.container div {
border: 1px solid #000;
}
html:
最终效果
也可以通过命名来写效果一样,多个命名的话要加上空格隔开.container{
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
如果你定义了容器的重复部分,你可以使用repeat()方法来生成多个相同值:.container{
grid-template-columns: repeat(3, 33%);
}
/* 等价于 */
.container{
grid-template-columns: 33% 33% 33%
}
特殊单元:frfr单元允许你将网格容器中的自由空间设置为一个份数:.container{
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
在上面的代码中,将网格容器的每个子项设置为三分之一。
上边这个是平均分成三份比设为33%要好很多,效果图也差不多。
tips:自由空间是在固定子项确定后开始计算的.
2.2 grid-template-areas
grid-template-areas可以配合grid-area定义一个显式的网格区域。grid-template-areas定义网格区域,然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。
用法:grid-template-areas: " | . | none | ..." "...":在grid-area中指定的网格区域名字
.:一个句点表示一个空的网格单元
none:没有网格区域被定义
实例:
css:.item-a{
grid-area: header;
background: black;
}
.item-b{
grid-area: main;
background: blue;
}
.item-c{
grid-area: sidebar;
background: chartreuse;
}
.item-d{
grid-area: footer;
background: red;
}
.container{
width: 500px;
height:200px;
margin-top: 20px;
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "header header . footer"
"main main . sidebar"
"main main . sidebar";
}
html:
最终效果
2.3 grid-column-gap/grid-row-gap/grid-gap
指定网格线的大小,也可以说是网格子项之间的间距。词法:grid-column-gap: grid-row-gap: :长度值
grid-gap是grid-column-gap和grid-row-gap的简称:grid-gap:
如果只有一个值,grid-row-gap的值将和grid-column-gap一样。
实例:
css:.container {
width: 500px;
height: 500px;
display: grid;
grid-template-columns: repeat(3, 30%);
grid-template-rows: repeat(3, 30%);
grid-column-gap: 2%;
grid-row-gap: 2%;
}
html:
最终效果
2.4 justify-items/align-items
justify-items让网格子项的内容和列轴对齐(align-items则相反,是和行轴对齐),这个值对容器里面的所有网格子项都有用,flex里边没有这个属性。justify-items: start | end | center | stretch
start:内容和网格区域的左边对齐
end:内容和网格区域的右边对齐
center:内容和网格区域的中间对齐
stretch:填充整个网格区域的宽度(默认值)
align-items
让网格子项的内容和行轴对齐,这个值对容器里面的所有网格子项都有用。align-items: start | end | center | stretch;start:内容和网格区域的顶部对齐
end:内容和网格区域的底部对齐
center:内容和网格区域的中间对齐
stretch:填充整个网格区域的高度(默认值)
2.5 justify-content/align-content
justify-content如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容器,这时候你可以设置网格的对齐方式(垂直于列网格线对齐)。justify-content: start | end | center | stretch | space-around
| space-between | space-evenly ;start:左对齐
end:右对齐
center:居中对齐
stretch:填充网格容器
space-around:在每个网格子项中间放置均等的空间,在始末两端只有一半大小
space-between:两边对齐,在每个网格子项中间放置均等的空间,在始末两端没有空间
space-evenly:网格间隔相等,包括始末两端
align-content如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容器,这时候你可以设置网格的对齐方式(垂直于行网格线对齐)。align-content: start | end | center | stretch | space-around | space-between
| space-evenlystart:顶部对齐
end:底部对齐
center:居中对齐
stretch:填充网格容器
space-around:在每个网格子项中间放置均等的空间,在始末两端只有一半大小
space-between:上下对齐,在每个网格子项中间放置均等的空间,在始末两端没有空间
space-evenly:在每个网格子项中间放置均等的空间,包括始末两端
上边的属性除了justify-items之外其余的属性flex都有这个我就不举例了。
2.6 grid-auto-columns/grid-auto-rows
自动生成隐式网格轨道(列和行),当你定位网格项超出网格容器范围时,将自动创建隐式网格轨道。grid-auto-columns:
grid-auto-rows: :可以是一个长度,百分比或者是一个网格中自由空间的份数(通过使用fr单位)
为了说明隐式网格轨迹如何被创建,思考一下这个:.container{
display: grid;
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px
}
我们创建了一个2*2的网格
但现在想象你使用grid-column和grid-row来定位你的网格子项,就像这样:.item-a{
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b{
grid-column: 5 / 6;
grid-row: 2 / 3;
}
我们告诉.item-b在第 5 列网格线开始第 6 列网格线结束,但我们还没有定义第 5 或者第 6 列。因为我们引用的线不存在,0 宽度的隐式网格轨迹将被创建来填充这些空缺。我们可以使用grid-auto-columns和grid-auto-rows来指定这些隐式网格轨迹的宽度:.container{
grid-auto-columns: 60px;
}
实例:
css:.container3 {
display: grid;
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px;
grid-auto-columns: 60px;
}
.item1{
background: red;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item2{
background: green;
grid-column: 5 / 6;
grid-row: 2 / 3;
}
html:
效果图
2.7 grid-auto-flow
在没有设置网格项的位置时,这个属性控制网格项怎样排列。grid-auto-flow: row | column | row dense | column denserow:按照行依次从左到右排列
column:按照列依次从上到下排列
dense:按先后顺序排列
实例:
css: grid-auto-flow设为row.container4{
display: grid;
grid-template-columns: 200px 200px 200px 200px 200px;
grid-template-rows: 200px 200px;
grid-auto-flow: row;
color: #fff;
}
.item3{
grid-column: 1;
grid-row: 1 / 3;
background: red;
}
.item7{
grid-column: 5;
grid-row: 1 / 3;
background: bisque;
}
.item5{
background: black;
}
.item6{
background: blueviolet;
}
.item4{
background: blue;
}
html:
效果:
grid-auto-flow设为column
2.8 grid
grid是一种简写形式:grid: none | /
| [ [ / ] ];
3、网格子项的属性
3.1 grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row
通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的开始位置,grid-column-end、grid-row-end定义网格项的结束位置。grid-column-start: | | span | span | auto ;
grid-column-end: | | span | span | auto ;
grid-row-start: | | span | span | auto ;
grid-row-end: | | span | span | auto ;
| :可以是一个数字以适用被标记了数字号的网格线,或者是一个名字以适用命名了的网格线
span :子项将跨越指定数字的网格轨迹
span :子项将跨越指定名字之前的网格线
auto:自动布局,自动跨越或者默认跨越一个。
实例:
css:.item-a{
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start
grid-row-end: 3
}
.item-b{
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2
grid-row-end: span 2
}
grid-column是grid-column-start和grid-column-end的简称;grid-row是grid-row-start和grid-row-end的简称。grid-column: / | / span ;
grid-row: / | / span ;
实例:
css:.item-c{
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
3.2 grid-area
给网格子项取一个名字以让它被由grid-template-areas属性创建的模板引用。同时,这个属性还可以用来更简短地表示grid-row-start+ grid-column-start + grid-row-end+ grid-column-end。grid-area: | / / / ;:选择的名字
/ / / – 可以是网格线的数字或名字
实例:.item-d{
grid-area: header
}
作为grid-row-start+ grid-column-start + grid-row-end+ grid-column-end的一种简写:.item-d{
grid-area: 1 / col4-start / last-line / 6
}
3.3 justify-self/align-self
(1)justify-self
让网格子项的内容以列轴对齐(与之相反align-self是跟行轴对齐),这个值可以应用在单个网格子项的内容中。justify-self: start | end | center | stretch
start– 让内容在网格区域左对齐
end – 让内容在网格区域右对齐
center – 让内容在网格区域中间对齐
stretch – 填充着呢个网络区域的宽度(默认值)
(2)align-self
让网格子项的内容以行轴对齐(与之相反justify-self是跟列轴对齐),这个值可以应用在单个网格子项的内容中。align-self: start | end | center | stretch
start – 让内容在网格区域上对齐
end– 让内容在网格区域下对齐
center – 让内容在网格区域中间对齐
stretch – 填充着呢个网络区域的高度(默认值)
如果觉得文章还不错并对你有帮助的话,请分享给你的小伙伴,并点赞,点亮红心的人最美,有什么不懂得可以在底下留言哦。
html中grid布局,CSS:玩转grid布局相关推荐
- css box 等高布局,css实现等高布局有哪些方式
什么是等高布局? 指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说分为两类: 1.伪等高 子元素高度差依然存在,只是视觉上给人感觉就是等高. 2.真等高 子元素高度相等. 伪等高实现 ...
- html5九宫格布局,CSS实现自适应九宫格布局(完整方法大全)
看到微博和朋友圈都实现了图片九宫格,曾经有次面试也问到了九宫格这个问题,当时想到的是先固定每个单元格的宽高,然后进行浮动.今天想折腾一下,实现自适应父元素宽度的布局.这次我只写了四种方式去实现九宫格, ...
- html左中右自适应布局,CSS左中右自适应布局六种方案与原理
css虽简单,但细节多,技巧性高,易学难精. 如何实现左右固定300px , 中间宽度自适应? 有如下结构 左 右 中 公有样式, 设置高,设置左右宽度固定300px,左右为红色,中间为黄色. .it ...
- html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
- CSS之display:block布局
转载自http://www.cnblogs.com/Ry-yuan/p/6848197.html) CSS之使用display:inline-block来布局 css之display:inline-b ...
- css grid布局_如何使用CSS Grid重新创建Medium的文章布局
css grid布局 When people think of CSS Grid they normally envision image grid layouts and full web page ...
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局完全指南(图解 Grid 详细教程) CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就 ...
- css display:grid布局
简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...
- css grid设置宽度,如何设置Grid Layout (网格布局)列的最小宽度
如何设置Grid Layout (网格布局)列的最小宽度?设置网格的列最小宽度时,在网格的列宽设置部分中使用minmax()函数,下面我们就来看具体的内容. 我们先来看一下minmax()函数的格式m ...
最新文章
- python使用fpdf创建pdf文件包含:页眉、页脚并嵌入logo图片、设置使用中文字体
- vim 中如何替换选中行或指定几行内的文本
- Windows系统下nodejs、npm、express的下载和安装教程详解
- pdfparser java_如何使用java从PDF中提取内容?
- Uipath 学习栏目基础教学:11、录制
- python学习-知识点进阶使用(end、while else、range、iter、list的多种遍历方式)
- AdaptiveMaxPool的作用
- windows 本地搭建git仓库_Windows系统下搭建Git本地代码库
- AttributeError: module 'socketio' has no attribute 'Server'
- PHP文件系统-文件的读写操作
- 工业机器人技术试题_《工业机器人技术基础》课程试卷A卷 参考答案
- InstallShield 教程
- idea格式化java代码,设置属性自动换行
- 如何用10分钟做出一个表情包视频
- 不知道STAR法则还敢去面试?备受500强HR推崇的STAR法则详解
- 前端实习周记07(毕业论文开题了。。。欧耶。。。欧耶。。。耶。。。)
- 怎样从微博下载视频?
- Java 响应对象详解
- thinkphp5.1 || 给图片添加文字,图片水印
- MATLAB提取图片点击处的坐标代码(仅供参考)