grid布局笔记

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

grid-template-columns

列内设置规定的宽度大小

grid-template-rows

行内设置规定的高度大小

grid-auto-columns

列内没有被设置的宽度大小

grid-auto-rows

行内没有被设置的高度大小

  display: grid; // 行级grid布局
  display:inline-grid; // 行内grid布局
  grid-template-columns: 100px 100px 100px; // 标识一行排列3个元素每个元素的宽度为100px
  grid-template-rows: 100px 100px 100px; // 标识前三行排列 高度为100px
  grid-auto-rows: 50px; // 假如元素在在第三行之后高度默认为50px
  grid-auto-columns: 50px; // 假如元素在在第三列之后宽度默认为50px

repeat()表示按照某个规律循环

display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
// 等价于
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);

也可以写多个
grid-template-rows: 100px 33.33% 100px 33.33%;
grid-template-rows: repeat(100px 33.33%);

auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

页面的大小是会变化的假如现在有n个div宽度为100px，但是页面的宽度未知我不知道一行有多少个div就可以用到auto-fill了

  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);

fr 关键字

grid-template-columns: 1fr 1fr; 
// 就像flex 下面有两个元素 这两个元素上面都有flex:1;这个属性
grid-template-columns: repeat(2, 1fr); // 效果一样 
// fr可以与绝对长度的单位结合使用，这时会非常方便。
grid-template-columns: 150px 1fr 2fr;

minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

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

auto

auto关键字表示由浏览器自己决定长度。

grid-template-columns: 100px auto 100px;

grid-row-gap 属性，

grid-column-gap 属性，

grid-gap 属性

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

 grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-gap: <grid-row-gap> <grid-column-gap>;

grid-template-areas

grid-area

// 一般这中是九宫格布局 
.container {
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'header header header'
                       'main main main '
                       'footer footer footer ';
}


.header{
	grid-area:header; // 这样就会把上面全部占
}
.main{
	grid-area:main; 
}
.footer{
	grid-area:footer;
}
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>



.container {
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'header header header'
                       'main main aside'
                       'footer footer footer';
}


.header{
	grid-area:header; // 这样就会把上面全部占
}
.main{
	grid-area:main; 
}
.aside{
	grid-area:aside;
}
.footer{
	grid-area:footer;
}
<div class="header"></div>
<div class="main"></div>
<div class="aside"></div>
<div class="footer"></div>

grid-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

grid-auto-flow: column;

grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
grid-auto-flow: row;

现在修改设置，设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。
grid-auto-flow: row dense;

justify-content 属性，

align-content 属性，

place-content 属性

和flex相似 place-content: justify-content align-content 若只有一个参数那第二个参数默认等于第一个

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

grid-column-start 属性，

grid-column-end 属性，

grid-row-start 属性，

grid-row-end 属性

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

1	2	3
a	a	a
b	b	b
c	c	c

假如用以上的九宫格

.a{
	grid-area:a;
	// 效果类型于
	grid-column-start:1;
	grid-column-end:4;
	// 效果类型于
	grid-column-start:a-start; // a-start表示a区域的开始 因为a区域是行 如果是列的话用grid-row-start
	// 相当于一个变量是一个值 不代表点
	grid-column-end:a-end; // a-end表示a区域的开始
	// span相当于跨列或者跨行 
	// 效果类型于
	grid-column-end:span 3;
	// 效果类型于
	grid-column-start:span 3;
}
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

grid-column 属性，

grid-row 属性

  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
  .item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
// 等同于 
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
// 等同于 
.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

justify-self 属性，

align-self 属性，

place-self 属性

某一网格内的对齐样式

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