kendoui grid合并单元格_Grid布局学习。

一.基本概念

1.1.采用网格布局的区域就是容器，容器内部采用网格定位的子元素就称为项目。（注意必须是容器的直接子元素才能是项目，Grid布局只对项目有作用）。

<div class="container">
 <div class="item"><p>1</p></div>
 <div class="item"><p>2</p></div>
 <div class="item"><p>3</p></div>
</div>
//class为item的div才是项目，p元素不是项目，因为他不是为外层class为container的div的直接子元素。所以Grid布局对其无效。

1.2.容器的水平区域称为行（row），垂直区域称为列（column）。行和列的交叉区域就成为了单元格。正常情况下n行会有n+1条水平线，m列就会有m+1条垂直线。

二，容器属性。

2.1容器可以是块级元素，也可以使行内元素，一般默认情况下是块级元素。可以使用display-inline-grid属性将其设置称为行内元素。(注意只要设置了Grid布局以后，容器的float,display:inline-block,display:table-cell,vertical-align等设置都将失效）

2.2.设置了容器之后，就需要给容器分行和列了。grid-template-columns属性定义可列的宽度，grid-template-rows定义了行的高度。

将容器分割成了一个3*3的网格，每个行的高度为100px，列的宽度为100px。除了固定固定宽高之外还可以写成半分比的形式。上面可改写为下面带代码。（注意这里项目大小被写死了，就是宽高100px。）

grid-tempalte-columns:33.3% 33.3% 33.3%；
grid-template-rows: 33.3% 33.3% 33.%；
//这会将容器分割为一个3*3的网格，且每个单元格一样大小，自动填满容器，均分容器空间。这里宽高随容器大小改变。

有时候当网格比较多的时候，且大小相同的时候，这么写会很麻烦，所有为了简便，有一个重复函数可以用。

2.3.repeat（）

这个函数接受两个参数，第一个参数为重复的次数，第二个参数为重复的值，例如写一个3*3大小为100px的容器。

display:grid;
grid-tempalte-columns:repeat(3,100px);
grid-template-rows:repeat(3,100px);

第二个参数可以是固定的值，也可以是百分比。

grid-tempalte-columns:repeat(3,33.3%)；
grid-template-rows:repeat(3,33.3%)；

除了重复这样简单的值和百分比之外还可以重复简单的模式。例如写一个9*9的网格，单元格的大小为第1.4.7列的宽度为20px，2.5.8列的宽度为40px，3.6.9列的宽度为80px。行的高度同理。

grid-template-columns:repeat(3,20px 40px 80px)；
grid-template-rows:repeat(3,20px 40px 80px)；

.关键字：auto-fill

有时候单元格的大小一定，但是容器大小不一定，又希望一行（或列）尽可能排跟多单元格，这时可以用到关键字auto-fill.例子如下

display:grid;
grid-template-columns:repeat(auto-fill,10px)；
表示每列的宽度为100px，然后自动填充，一行排尽可能多的列

.关键字：fr

为了方便表示比例关系，网格布局提供了fr关键字。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。也可以和绝对长度结合使用。例如

display:grid;
grid-template-columns:100px 1fr 2fr；
/第一列为100px 第二列的宽度为第三列的一半。

自动填满的容器，容器大小改变只会改变第二第三列的宽度

.minmax()

minmax(）函数产生一个长度范围，分别为最小和最大。

minmax(100px,1fr)
//最小100px 最大1fr

.auto关键字

表示长度有浏览器决定。

grid-template-columns:auto 100px 200px;
//表示第二列和第三列宽度分别为100px 200px 第一列宽度浏览器自己决定，且一般为该单元格最大宽度。

.网格线是可以有名字的，用[]包裹着，还可以有多个名字。

grid-template-columns:[a1]100px [a2]200px [a3 c4] 300px

2.4 grid-column-gap,grid-row-gap.grid-gap属性。

grid-column-gap：列和列之间的距离。

grid-template-row：行与行之间的距离。

grid-gap：为前面两者的缩写。

例子。

 grid-column-gap:10px;
 grid-row-gap:20px
//等价于：
grid-gap:20px 10px 
//最新规定
grid-column-gap = column-gap
grid-row-gap = row-gap
grid-gap = gap
//尽量不要写缩写，有助于代码的可读性。

2.5.grid-template-areas属性

这个属性用来给网格布局指定‘区域’，一个区域单个或多个单元格组成。

.container{
 display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
grid-template-areas:'1 2 3'
                     '4 5 6'
                     '7 8 9';
}
//最后一行代码分了九个单元格，这9个单元格每个单元格就是一个区域。若想合并区域只需要给他们取一样的
名字即可，如若不想要摸个区域只需用点表示该区域。

grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";
grid-template-areas:'1 . 3'
                     '4 . 6'
                     '7 . 9';
}

2.6 grid-auto-flow 属性

划分网格后，项目会自动按顺序放在网格中，默认情况下的顺序是先行后列，即先填满一行后在主动换到下一行。而grid-auto-flow可以决定先后顺序。

grid-auto-flow:row;//先行后列（这是默认值）
grid-auto-flow:column;//先列后行。

a,b设置了单元格占两列，a后面空缺是因为c本来就连着b在b的后面。这也是可以改变的。如下

grid-auto-flow:row dense;//先把行填满
//同理
grid-auto-flow:column dense;//先把列填满
这两个值的作用在于某些项目位子固定之后，其余的项目怎么排列

2.7 justify-items 属性，align-items 属性，place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。place-items是前面两个的组合缩写。属性有如下的值。

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

效果我就不一一列出来了。

2.8 justify-content 属性，align-content 属性，place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。place-content是前面两个属性的组合缩写。属性有如下的值。

• start ： 容器的起始边框
• center：容器内部居中
• end:容器的结束边框
• stretch：项目大小没固定是时自动填满容器。
• space-around：每个项目的两侧的间隔的距离相等，所以项目之间的间隔是项目和容器之间间隔的两倍。
• space-between：项目与项目之间的间隔相等，所以项目和容器边框之间没有间隔。
• space-evenly：项目和项目，项目和边框之间的间隔都相等。

2.9 grid-auto-columns 属性，grid-auto-rows 属性

这两个属性是用来规定浏览器自动增加行（列）时，列的宽度和行的高度的。因为有的时候某些项目因为位置原因会超出原来的网格。这时浏览器会自动根据需求增加行（列），如果不写这两个属性，浏览器会根据单元格内的内容来规定新增的行（列）宽高。

grid-auto-columns:50px；//表示新增的列的宽度为50px
grid-auto-rows:50px；//表示新增行的高度为50

三.项目的属性

3.1grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性

项目的位子可以特殊指定。如上面遇到的情况。grid-auto-flow 属性就是在某些项目位置指定之后用到的。上面的四个属性分别指定项目的四条边框（也就是网格线）。并且不知可以指定第几条网格线，还可以指定线的名字。前面说了网格线是可以命名的。这是四个属性还可以使用关键字span(跨几个单元格）

grid-column-start:项目的起始列，
grid-column-end:项目结束列，
grid-row-start:项目的开始行，
grid-row-end:项目的结束行

举例如下：

a{
grid-column-start:1;
grid-column-end:3
//等价于grid-column-start: span 2 ;
grid-row-start:2;
grid-row-end:4;
}
//a是占1-3列2-4行

3.2gird-column属性，grid-row属性。

grid-column:是 grid-column-start 和grid-column-end的组合缩写。

grid-row:是grid-row-start和grid-row-end的组合缩写

grid-column-start:1;
grid-column-end:3;
grid-row-start:2;
grid-row-end:4;
//等价于
grid-column: 1 / 3;
grid-row:2 / 4;

3.3gird-area:指定醒目放在哪一个区域

.container{
    display:grid;
    grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";
}
.item-1
grid-area:footer;
}
指定.item-1这个单元格放在footer区。

3.4justify-self 属性，align-self 属性，place-self 属性

justify-self 属性：指定单元格里面内容的水平位置（左中右）

.有四个属性值：start | center | end stretch

align-self 属性：指定单元格里面的内容的垂直位置（上中下）

.有四个属性值：start | center | end stretch

place-self属性：则是上面两个属性的组合缩写。