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

定义每一行和每一列的大小

html 复制代码

<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

设置隐式网格生成行和列的属性

html 复制代码

 <style>
    grid-auto-rows: 100px;
  	grid-auto-columns: 100px;
 </style>

4.grid-template-areas

html 复制代码

<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.容器内单元格对齐方式

html 复制代码

<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.设置单元格内项目的对齐方式

注意区分上面对齐方式的区别

html 复制代码

<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

显式的指定项目占据的开始、结束单元格

html 复制代码

<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

html 复制代码

<style>
	grid-area: 1 / 1 / 3 / 3; //开始行 / 开始列 / 结束行 / 结束列
</style>