CSS的grid布局

传统布局有三种：

• 传统布局

利用position + display + float布局，兼容性好，但是效率低

• flex布局

有自己的一套属性，效率高，学习成本低，兼容性强

• grid布局

网格布局是最强大的css布局方案，但是知识点多，学习成本相对困难，目前的兼容性不如flex好

基本概念

容器----有容器属性（container）
项目----有项目属性（item）

容器属性

• grid-template-columns
• grid-template-rows
• row-gap
• column-gap
• grid-gap
• grid-template-areas
• grid-auto-flow
• justify-items
• align-items
• place-items
• justify-content
• align-content
• place-content
• grid-auto-columns
• grid-auto-rows

grid-template-*

grid-template-columns: 250px 200px 180px; 用来设置有几列，且每一列的宽度分别是多少 ，这个设置的就是有3列，即宽度分别为：250px 200px 180px
grid-template-rows: 150px 80px 102px 60px; 用来设置有几行，且每一行的宽度分别是多少 ，这个设置的就是有4行，即高度分别为：150px 80px 102px 60px

eg:

.container{
  display: grid;
  color: white;
  text-align: center;
  font-size: 25px;
  line-height: 25px;
  width: 1000px;
  height: 800px;
  grid-template-columns: 250px 200px 180px;
  grid-template-rows: 150px 80px 102px 60px;
}


与grid-template-*相关

1. repeat()，第一个参数是重复的次数，第二个参数是所要重复的值

grid-template-columns: 150px 150px;
//可简写为
//grid-template-columns: repeat(重复次数,其数值大小);
grid-template-columns: repeat(3,150px);

2. auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充

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


3. fr，为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意为"片段"）

grid-template-columns: repeat(4, 1fr); //宽度平均分成4份


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

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


5. auto，表示由浏览器自己决定长度

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


6. 网格线，可以用方括号定义网格线名称，方便以后的引用

grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];


column-gap与row-gap

一句话解释就是，item（项目）相互之间的距离

eg:

column-gap: 20px;
row-gap: 15px;

效果：


grid-template-areas

一个区域由单个或多个单元格组成，由你决定(具体使用，需要在项目属性里面设置)
区域不需要利用，则使用"点"（.）表示
区域的命名会影响到网格线。每个区域的起始网格线，
会自动命名为区域名-start，终止网格线自动命名为区
域名-end

eg:

grid-template-areas: 'a . c'
'd . f'
'g . i';

效果：

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”，即先填满第一行，再开始放入第二行（就是子元素的排放顺序)

eg:

//先行后列
grid-auto-flow: row; 

效果：

eg:

//先列后行
grid-auto-flow: column

效果：


justify-items(水平方向)和align-items(垂直方向)

设置单元格内容的水平和垂直的对齐方式
justify-items:start | end | center | stretch
align-items:start | end | center | stretch;


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;


grid-auto-columns/grid-auto-rows

用来设置多出来的项目宽和高
我只设置了3x3个项目，但是实际有10个，整个属性就是用来设置多出来的项目


项目属性

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column (1和2的简写形式)
• grid-row (3和4的简写形式)
• grid-area
• justify-self
• align-self
• place-self(8和9的简写形式)

grid-column-start/grid-column-end/grid-row-start/grid-row-end

一句话解释，用来指定item的具体位置,根据在哪根网格线
列方向4根网格线，第一个项目占用了从第一根到第三根


grid-column/grid-row

grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式

eg:

//将
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
//可简写为
.item-1 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

效果：


grid-area

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


eg:

//将
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
//kejianxiew
grid-area: 1 / 3 / 2 / 4;

justify-self/align-self/place-self

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目(水平方向)
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目(垂直方向)
justify-self:start | end | center | stretch;
align-self:start | end | center | stretch;
place-self属性是align-self属性和justify-self属性的合并简写形式place-self:centercenter;