kendoui grid合并单元格_[CSS]之Grid布局

网格布局(Grid)将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

一、Grid布局与Flex布局的区别

• Flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局
• Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局

二、容器属性

1. display: grid

指定一个容器采用网格布局

2. display: inline-grid

将容器元素设置成行内元素

3. grid-template-columns 和 grid-template-rows

grid-template-columns
定义每一列的宽度
grid-template-rows
定义每一行的高度

(3.1) repeat(重复的次数，所要重复的值)

.

(3.2) auto-fill关键字

当单元格的大小是固定的，容器的大小不确定，实现每一行或每一列容纳尽可能多的单元格时，使用auto-fill实现自动填充

.

(3.3) fr关键字

表示比例关系，fraction的缩写

.

(3.4) minmax(最小值，最大值)

将长度设置在一个范围内

.

(3.5) auto关键字

表示由浏览器自己决定长度

4. row-gap 和 column-gap 和 gap

• row-gap设置行与行的间隔
• column-gap设置列与列的间隔
• gap 是row-gap和column-gap的缩写

.

5. grid-template-areas

用于定义区域

.

6. grid-auto-flow

设置容器子元素的排列顺序
默认值是row(先行后列)
row dense(先行后列，尽量不出现空格)
column(先列后行)
column dense(先列后行，尽量不出现空格)

.

7. justify-items属性，align-items属性，place-items属性

(7.1) justify-items

设置单元格内容的水平位置(左中右)

属性值：

• start：对齐单元格的起始边缘
• end：对齐单元格的结束边缘
• center：单元格内部居中
• stretch：拉伸，占满单元格的整个宽度(默认)

.

效果图

justify-items.png

(7.2) align-items

设置单元格内容的垂直位置(上中下)

属性值：

• start：对齐单元格的起始边缘
• end：对齐单元格的结束边缘
• center：单元格内部居中
• stretch：拉伸，占满单元格的整个宽度(默认)

.

效果图

align-items.png

(7.3) place-items

是align-items和justify-items的缩写

place-items

8. justify-content属性，align-content属性，place-content属性

属性值：

• start：对齐容器的起始边框
• end：对齐容器的结束边缘
• center：容器内部居中
• stretch：项目大小没有指定时，拉伸占据整个网格容器
• space-around：每个项目两侧的间隔相等(项目之间的间隔比项目与容器边框的间隔大一倍)
• space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔
• space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

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

place-content

效果图：

space-content.png

9. grid-auto-columns属性，grid-auto-rows属性

用来设置浏览器自动创建的多余网格的列宽和行高

10. grid-template属性，grid属性

• grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
• grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式

三、项目属性

1. grid-column-start属性，grid-column-end属性，grid-row-start属性，grid-row-end属性

用来指定项目的四个边框，分别定位在哪根网格线

• grid-column-start：左边框所在的垂直网格线
• grid-column-end：右边框所在的垂直网格线
• grid-row-start：上边框所在的水平网格线
• grid-row-end：下边框所在的水平网格线

2.grid-column属性，grid-row属性

• grid-column属性是grid-column-start和grid-column-end的合并简写形式
• grid-row属性是grid-row-start属性和grid-row-end的合并简写形式

.

3.grid-area

指定项目放在哪一个区域

.

效果图：

grid-area.png

• grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置

.

4.justify-selft属性，align-self属性，place-self属性

• justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目
• align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
• place-self属性是align-self属性和justify-self属性的合并简写形式

place-self

属性值：

• start：对齐单元格的起始边缘
• end：对齐单元格的结束边缘
• center：单元格内部居中
• stretch：拉伸，占满单元格的整个宽度（默认值）