css3之grid布局
容器：gird container开启grid布局的元素
项目：grid items容器里面的子元素，不包括后代元素
显式网格（单元格）：通过grid-template-columns和grid-template-rows指定的网格，注意项目不等于单元格,可以通过属性设置某个项目占据多个单元格
隐式网格：超出指定网格之外的，比如指定两行两列，那么第五个元素就是隐式网格
网格区域:1个或者多个单元格组成的矩形区域
一、容器属性
1.grid-auto-flow
控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
-
row(默认值)
从上到下，从左到右的顺序依次排列 -
column
从左到右，从上到下的顺序依次排列 -
dense
一般都搭配上面两个属性使用，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。
2. grid-template-columns和grid-template-rows
定义每一行和每一列的大小
<style>width: 600px;height: 600px;background-color: red;display: grid; //开启网格布局grid-auto-flow: column;// 具体值// grid-template-columns: 100px 100px;// grid-template-rows: 100px 100px;// 按比例计算// grid-template-columns: 1fr 1fr;// grid-template-rows: 1fr 1fr;// 值的简便写法，等同于1fr 1fr 1fr// grid-template-columns: repeat(3, 1fr);// grid-template-rows: repeat(3, 1fr);// 属性的缩写，前面是行，后面是列grid-template: repeat(3, 1fr) / repeat(3, 1fr);// 最大最小值grid-template-columns: repeat(3, minmax(100px, 1fr));grid-template-rows: repeat(3, minmax(100px, 1fr));//给行线和列线命名，方便后续使用，但是感觉很鸡肋，用处不大，因为这个名字不会显示在F12的审查元素里面//反而变得不直观了grid-template-columns: [c1-start]1fr [c1-end c2-start] 1fr [c2-end c3-start] 1fr [c3-end];grid-template-rows: [r1-start]1fr [r1-end r2-start] 1fr [r2-end r3-start] 1fr [r3-end];
</style>3.grid-auto-rows和grid-auto-columns
设置隐式网格生成行和列的属性
<style>grid-auto-rows: 100px;grid-auto-columns: 100px;</style>
4.grid-template-areas
<style>
.container{width: 400px;height: 400px;background-color: red;display: grid; //开启网格布局grid-auto-flow: row;grid-template: repeat(3, 1fr) / repeat(3, 1fr);//非常形象的把整个容器划分出来了grid-template-areas:"header header header""left main right""footer footer footer";
}
.item1 {background-color: blue;grid-area: header;}.item2 {background-color: yellow;grid-area: left;}.item3 {background-color: green;grid-area: main;}.item4 {background-color: pink;grid-area: right;}.item5 {background-color: rgb(171, 90, 104);grid-area: footer;}
</style>
5.容器内单元格对齐方式
<style>width: 400px;height: 400px;background-color: red;display: grid; //开启网格布局grid-auto-flow: row;/*水平对齐方式start end center space-evenly space-between space-around*/justify-content: start;/*垂直对齐方式，可选值有start end center space-evenly space-between space-around*/align-content: start;/*简写方式 第一个值是垂直对齐方式 第二个值是水平对齐方式*/place-content: space-around end;</style>
6.设置单元格内项目的对齐方式
注意区分上面对齐方式的区别
<style>width: 400px;height: 400px;background-color: red;display: grid; //开启网格布局grid-auto-flow: row;/*水平对齐方式start end center */justify-items: center;/*垂直对齐方式，可选值有start end center */align-items: center;: start;/*简写*/place-items: center center;</style>
二、项目属性
1.grid-row-start、grid-row-end、grid-row-start、grid-row-end
显式的指定项目占据的开始、结束单元格
<style>//行开始编号grid-row-start: 1;//列开始编号grid-column-start: 1;//行结束编号grid-row-end: 3;//列结束编号grid-column-end: 3;grid-row: 1 / 3; //简写，第一个参数是开始位置，第二个参数是结束位置grid-column: 1 / 3;grid-row: 1 / span 2; //span表示跨几行，偏移量，推荐使用这种方式，后续更改位置，只需要修改开始位置grid-column: 1 / span 2;grid-row: span 2; //如果从当前位置开始偏移,开始位置可以不写grid-column: span 2;grid-row: r1-start / r2-end; //使用上面自定义命名grid-column: c1-start / c2-end;
</style>
2.grid-area
<style>grid-area: 1 / 1 / 3 / 3; //开始行 / 开始列 / 结束行 / 结束列
</style>