Grid布局

摘要:
该项只能是容器的顶部子元素。行和列容器中的水平区域称为行行,垂直区域称为列-列单元格行和列的交叉区域。它被称为单元格网格线的网格线。该行有n+1条水平网格线,该列有n+1个垂直网格线。容器属性display:grid将容器设置为网格布局。您还可以将行中的元素设置为网格版式--display:inlinegrid。

什么是Grid布局?

将网页分为一个个网格,对网格进行不同的操作,实现不同的效果

容器

采用网格布局的区域

项目

网格内部采用网格定位的元素,称为项目。项目只能是容器的顶层子元素

行和列

容器中的水平区域称为行row,垂直区域称为列column

单元格

行和列的交叉区域,称为单元格cell

网格线

划分网格的线,称为网格线grid line

n行有n+1条水平网格线,n列有n+1条垂直网格线

容器属性

display:grid

将容器设为网格布局,也可以设置行内元素为网格布局--display:inline-grid。

设置网格布局的区域,其内部项目的float、display:inline-block、display:table-cell、vertical-align、column-*都将失效

grid-template-rows和grid-template-columns

定义网格每一行的行高、每一列的列宽

可以使用绝对单位,也可以使用百分比

repeat()函数

第一个参数为重复的次数,第二个参数为重复的数组;也可以重复某种模式

autofill关键字

当单元格大小固定,而容器大小不固定时,使用autofill关键字可以使单元格自动填满

如:grid-template-rows:autofill 100px; 是指每个单元格的行高为100px,且默认填充容器直到最低端 

fr关键字

方便表示比例关系。当两列的宽度分别为1fr和2fr,纳闷第二列宽度是第一列宽度的两倍

minmax()函数

表示长度范围,minmax(100px, 200px)就表示在100px到200px之间

auto关键字

表示由浏览器自己决定大小

网格线的名称

在设置grid-template-rows时,可以分别设置每条网格线的名称,以便之后引用,且可以为同一根网格线设置多个名称

grid-template-rows: [r1] 100px [r2] 100px [r3] 200px [r4]

grid-row-gap、grid-column-gap、grid-gap(目前不需grid-前缀)

grid-row-gap 设置行与行之间的距离

grid-column-gap 设置列与列之间的距离

grid-gap 以上两者的简写方式

gird-template-areas

将网格划分为多个区域,为每个区域指定名称,以便后面引用

如果某些区域不需要利用,则以‘.’代替

如: grid-template-areas:'a b c'

                                      'd e f'

            'g h i';

grid-auto-flow

在网格区域中,项目会按照顺序一个个放在网格中,默认是先列后行排列:grid-auto-flow:row 

可以通过设置为grid-auto-flow:column,先列后行

grid-auto-flow:row dense 表示自动填满行

grid-auto-flow:column dense 表示自动填满列

justify-items、align-items、place-items

justify-items:设置单元格内容的水平位置   align-items:设置单元格内容的垂直位置

  • start
  • end
  • center
  • strech

place-items:align-items | justify-items 简写

justify-content、align-content、place-content

justify-content:设置整个内容区域在容器中的水平位置   align-content:设置整个内容区域在容器中的垂直位置

  • start
  • end
  • stretch
  • space-between
  • space-around
  • space-evenly  设置行或列之间的间距和其与边框的间距相等

place-content属性是align-content属性和justify-content属性的合并简写形式。

grid-auto-rows ,grid-auto-columns 

表示多余的网格的行高和列宽

项目属性

grid-column-start ,grid-column-end ,grid-row-start ,grid-row-end

设置项目边框所在的网格线

可以使用span关键字,表示跨域 如:grid-row-start:span 2 表示跨越了两行

grid-row、grid-column 

gird-row:grid-row-start ,grid-row-end的缩写

grid-column:grid-column-start,grid-column-end的缩写

使用‘/’隔开

grid-area

将项目放在指定的容器命名的区域中

也可以写成网格线的合并,形成一块区域 gird-area: 1 / 1 / 3 / 3   grid-row-start / grid-column-start / grid-row-end / grid-column-end

justify-self 属性,
align-self 属性,
place-self

设置某个单独的单元格的水平位置、垂直位置。以及两者的简写格式

免责声明:文章转载自《Grid布局》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇vue-打包为webapp,如何解决应用内跳转外部链接返回导致退出应用mac 下 ts 环境 配置下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

微服务SpringCloud容器化案例

前言 当我们在使用微服务的时候,那么有一个问题一定会困扰我们,那就是项目的测试和部署。因为在单体应用下,部署项目很简单,直接打包启动就可以了,而对于微服务来说,因为有各个组件的存在所以让测试和部署都变得很麻烦,而容器化是微服务的部署一把利剑。 PS:本文不介绍具体docker使用的各种基础,以及微服务的各种基础,就是给出相应的案例,你可以根据这样的案例快速...

Docker从入门到放弃

  为什么要学习 docker 呢?深有体会,由于一些原因只能在他人电脑上搭建环境,明明在自己电脑上的程序跑的好好的,在他人的电脑上就是死活出错。折磨人呀!!!!!可是能怎么办,工作还得继续,曲线救国呗,折腾了一天终于搞好了,那么以后呢?想到了之前搭建靶机时候用到的docker,时间长了也忘了,准备好好梳理学习入门一波。《十分感谢大神的文章,本文基于大神的...

(二)Java数组特性总结,你真的了解数组吗?

一、数组的特殊性 (一)数组标识符是一个引用,指向堆中创建的一个真实对象,这个对象(数组)保存了指向保存其他对象的引用。 (二)数组中保存引用类型时保存的是对象引用,基本数据类型数组保存基本数据的值。 (三)数组的length只表示数组能够容纳多少元素,不能保存实际保存的元素个数。 (四)多维数组可以使用Arrays.deepToString()将多维数组...

open-falcon学习总结

open-falcon安装 直接安装openfalcon (略,见docker学习总结-openfalcon镜像的制作和打包或下面的链接) https://book.open-falcon.org/zh_0_2/quick_install/prepare.html https://www.cnblogs.com/nulige/p/7741580.html...

[转]html风格tooltip效果的实现

网页上的图片如果设置了alt属性,当鼠标移经时就会有tooltip出现,但是只能显示一行文本,有时需要多行文本,乃至图片来显示图片、链接或者其它HTML元素的提示信息时,alt属性就无能为力了。在本文提供了一种实现方案:为图片、链接等任意需要tooltip的HTML元素加上一个自定义的属性——"tooltip",tooltip的值即为要显示的提示信息,可以...

docker查看jvm内存占用

  yzh_1346983557 2019-04-12 11:17:38  9589  收藏 4 分类专栏: Docker 文章标签: docker jvm内存 版权 一。进入docker容器的宿主机,查看运行指定镜像的容器id(结果的第一列): docker ps | grep myImageName(或docker ps | gr...