【grid网格布局】_grid-template-columns

Grid 网格布局

通过设置CSS属性 display: grid;
可以定义一个 CSS 网格

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

Grid行与列的属性调节

grid-template-rows 属性定义网格布局中的列数，并可定义每列的宽度。

grid-template-columns 属性还可以用于指定列的尺寸（宽度）。
六种表达式：

1. length,百分比（占用容器的百分之几）

2. repeat(3,100px)

3. fr: grid-template-columns: 150px 1fr 2fr;

grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
1

表示有4列，第一列100px固定尺寸，第三列 max-content 代表刚好包含元素不溢出不换行的尺寸，剩下的2列都是弹性尺寸。

按照弹性尺寸的计算规则，两者将均分（这两列的弹性系数相等，均为1）剩下的可用空间。
4. auto : auto关键字表示由浏览器自己决定长度。
5. minmax(200px, 400px)
minmax()函数使我们能够为轨道设置最小和最大大小，从而使Grid能够在其中运行。
7. maxcontent
8. grid-template 是grid-template-rows ，grid-template-columns简写。

grid-template: grid-template-rows/grid-template-columns
例如：grid-template: repeat(3,200px)/repeat(3,100px);
创建一个三行每行高度200px 三列每列宽度100px 的网格。

Grid的响应式布局

可以进行响应式布局
auto-fit,auto-fill
共同点：
1.就是尽可能多的创建轨道
2.然后不足一个轨道的空间平均分配给已有的轨道
区别

1. auto-fit的最后一步是，折叠空轨道，将空轨道的空间全部平均分配给已有元素的轨道
2. auto-fill的最后一步是保留空轨道留白，不会折叠空轨道
   注意：auto-fit和auto-fill只有在容器宽度大于子元素的最小宽度总和时才有显示区别

justify-content, align-content

justify-content:属性是整个内容区域在容器里面的水平位置（左中右）
align-content: 属性是整个内容区域的垂直位置
取值： start | end | center | stretch | space-around | space-between | space-evenly;
含义：

1. space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

2. space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。

3. space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间 隔大一倍。

4. stretch 项目大小没有指定时，拉伸占据整个网格容器。
   

5. center 项目居中与容器
   

6. start 左端/顶端

7. end 右端/底端

项目属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
grid-column-start 属性，
grid-column-end 属性，
grid-row-start 属性，
grid-row-end 属性

除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。

这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
grid-column-start: span 5;

grid-column，grid-row 属性，

grid-column属性是grid-column-start和grid-column-end的合并简写形式，
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
这两个属性之中，也可以使用span关键字，表示跨越多少个网格。
grid-row: 1 / 3;
grid-row: 1 / span 2; 这两个等价的

单元格内容

justify-self: 属性设置单元格内容的水平位置（左中右）
start | end | center | stretch（默认值）;
align-self:属性设置单元格内容的垂直位置（上中下）
start | end | center | stretch（默认值）;
place-self:属性是align-self属性和justify-self属性的合并简写形式
place-self:center center;

grid-area 属性

1. grid-area属性指定项目放在哪一个区域。
2. grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、 grid-column-end的合并简写形式，直接指定项目的位置。
   例如：
   grid-area: row-start / column-start / row-end / column-end;

grid-auto-flow属性

如果有一些没有明确放置在网格上的grid item，自动放置算法会自动放置这些网格项，该属性则用于控制自动布局算法的工作方式，属性值有3个：
row（默认值）：告诉自动布局算法依次填充每行，根据需要添加新行
column：告诉自动布局算法依次填充每列，根据需要添加新列
dense：告诉自动布局算法，如果后面出现较小的 grid item，则尝试填充在网格中较早的空缺
注意：dense 只会更改网格项的可视顺序，并可能导致它们出现乱序，这对可访问性不利

.item-a {
	grid-column: 1;
	grid-row: 1 / 3;
}
.item-e {
	grid-column: 5;
	grid-row: 1 / 3;
}
.container {
	display: grid;
	grid-template-columns: 60px 60px 60px 60px 60px;
	grid-template-rows: 30px 30px;
	grid-auto-flow: row;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<section class="container">
	<div class="item-a">item-a</div>
	<div class="item-b">item-b</div>
	<div class="item-c">item-c</div>
	<div class="item-d">item-d</div>
	<div class="item-e">item-e</div>
</section>

1
2
3
4
5
6
7
8

效果如下