简介:
-
grid可以说是web布局的最新解决方案,也可以说是目前最好的解决方案。
-
有一个东西叫做文档流,也就是说我们的页面其实是从上到下从左到右一点一点堆积起来的。不过有了grid之后这个情况将会发生改变,如果说以前的文档流布局是一维布局的话,那么grid我们可以把它理解成二维布局。
-
首先,grid的基本概念其实就是在父元素身上挖坑,然后用子元素去填。
怎样使用grid
基础属性
display:grid;
先分行,再分列
grid-template-columns
grid-template-rows
grid-tamplate-columns 用来规定把父级的空间分割成多少列以及每一列的宽度,(column 也就是列的意思)
grid-template-columns: 100px 200px 300px;
grid-template-rows,原理和columns 一样
grid-template-rows: 100px 200px 300px;
组合起来:
grid-template-columns: 100px 40% 100px;
grid-template-rows: 100px 100px;
可以看到在grid-template-columns里面我用到了40%, 没错了,在这里面可以用百分比,也可以使用其他的单位,说白了这里是为了设置子元素的宽度 所以只要是宽度可以用的值在这里都是可以使用的。
grid-template /*复合样式*/
grid-template:<‘grid-template-rows’> / <‘grid-template-columns’>
特殊单位:fr
它是一个相对单位,比如上面grid-template-columns的值也可以这样设置: grid-template-columns:1fr 1fr 1fr; 这样便是把box分成了三列,并且每一列的宽度都占box宽度的3分之一,为什么是三分之一呢? 因为有3个fr。
重复值函数: repeat(4, 1fr);
利用repeat函数来创建多个重复的列 第一个值是多少列 第二个值是每一列的宽度
minmax(100px,auto);
auto-fill关键字
有时,单元格的大小是固定的,但是父级的大小不确定,如果希望父级每一行或每一列容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
auto 关键字
auto关键字表示有浏览器自己决定宽度或者高度
grid-template-columns: 100px auto 100px;
grid-auto-columns属性和 grid-auto-rows属性
用于设置网格之外的元素的宽高
单元格合并
概念:网格线(虚拟的其实并不存在)
合并列:
grid-column-start: 1; 开始合并的列 从父级最左边开始算 如果有四列子元素,那么父级的最右边是5
grid-column-end: 4; 结束合并的列
综合:grid-column: 2 / 4; 开始合并的列和结束合并的列
合并行:
grid-row-start: 1;开始合并的行
grid-row-end: 4;结束合并的列
grid-row: 2 / 4; 开始合并的列和结束合并的列
span关键字
定义要合并的数量
如: grid-column: 2 / span 3; 从第二列开始合并,往后面合并三列
Grid-template-areas属性(用命名的方式合并行与列)
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a a a'
'd e f'
'd h i';
.item{
border: 1px solid #0c5460;
&:nth-child(1){
grid-area: a;
}
}
}
单元格对齐方式
grid-auto-flow 定义元素的排列方式
默认是: row (横向排列意为:先行后列)
可设置:column 纵向排列
justify-content 和 align-content 针对多行
定义元素对齐方式:
normal
start
end
center
space-around
space-between
space-evenly
合并:place-content
justify-items 和 align-items 针对单行
justify-items: 调整子元素水平对齐方式
(调整子元素在主轴方向上的对齐方式)
start
end
center
其他
grid-gap
用来创建行和列之间的空隙
接受两个值 第一个是行与行之间的间距 第二个是列与列之间的间距
如果只给一个值,那么行与列之间的间距是一样的
grid-row-gap
grid-column-gap