[CSS]之Grid布局

网格布局(Grid)将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

一、Grid布局与Flex布局的区别

• Flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局
• Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局

二、容器属性

1. display: grid

指定一个容器采用网格布局

2. display: inline-grid

将容器元素设置成行内元素

3. grid-template-columns 和 grid-template-rows

grid-template-columns
定义每一列的宽度
grid-template-rows
定义每一行的高度

(3.1) repeat(重复的次数，所要重复的值)

.container {
  display: grid;
  grid-template-columns: repeat(3, 20%);
  grid-template-rows: repeat(3, 20%);
}

(3.2) auto-fill关键字

当单元格的大小是固定的，容器的大小不确定，实现每一行或每一列容纳尽可能多的单元格时，使用auto-fill实现自动填充

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
}

(3.3) fr关键字

表示比例关系，fraction的缩写

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 150px;
}
表示第二列的宽度是第一列的2倍，第三列宽度是150px

(3.4) minmax(最小值，最大值)

将长度设置在一个范围内

.container {
  display: grid;
  grid-template-colunms: 150px 20% (100px,1fr);
}
表示第三列的列宽不小于100px，不大于1fr

(3.5) auto关键字

表示由浏览器自己决定长度

4. row-gap 和 column-gap 和 gap

• row-gap设置行与行的间隔
• column-gap设置列与列的间隔
• gap 是row-gap和column-gap的缩写

.container {
  gap: 20px 30px;
}
设置行间距为20px，列间距为30px

5. grid-template-areas

用于定义区域

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
  grid-template-areas: 'header header header'
                       'slidbar main .'
                       'footer footer footer';
}
划分成9个单元格，顶部是header区域，中间分为slidebar和main(.表示这个区域不需要利用)，底部是footer区域

6. grid-auto-flow

设置容器子元素的排列顺序
默认值是row(先行后列)
row dense(先行后列，尽量不出现空格)
column(先列后行)
column dense(先列后行，尽量不出现空格)

.container {
  display: grid;
  grid-template-columns: repeat(3,100px);
  grid-template-columns: repeat(3,100px);
  grid-auto-flow: column
}

7. justify-items属性，align-items属性，place-items属性

(7.1) justify-items

设置单元格内容的水平位置(左中右)

属性值：

• start：对齐单元格的起始边缘
• end：对齐单元格的结束边缘
• center：单元格内部居中
• stretch：拉伸，占满单元格的整个宽度(默认)

.container {
  display: grid;
  grid-template-columns: repeat(3,165px);
  grid-template-rows: repeat(3,165px);
  grid-auto-flow: row;
  border: 1px solid black;
  justify-items: start;
}

效果图

justify-items.png

(7.2) align-items

设置单元格内容的垂直位置(上中下)

属性值：

• start：对齐单元格的起始边缘
• end：对齐单元格的结束边缘
• center：单元格内部居中
• stretch：拉伸，占满单元格的整个宽度(默认)

.container {
  display: grid;
  grid-template-columns: repeat(3,165px);
  grid-template-rows: repeat(3,165px);
  grid-auto-flow: row;
  border: 1px solid black;
  align-items: start;
}

效果图

align-items.png

(7.3) place-items

是align-items和justify-items的缩写

place-items: <align-items> <justify-items>

8. justify-content属性，align-content属性，place-content属性

属性值：

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

place-content属性是align-content属性和justify-content属性的合并简写形式

place-content: <align-content> <justify-content>
.container {
  height: 500px;
  display: grid;
  grid-template-columns: repeat(3,105px);
  grid-template-rows: repeat(3,105px);
  grid-auto-flow: row;
  border: 1px solid black;
  place-content: space-evenly center;
}

效果图：

space-content.png

9. grid-auto-columns属性，grid-auto-rows属性

用来设置浏览器自动创建的多余网格的列宽和行高

10. grid-template属性，grid属性

• grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
• grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式

三、项目属性

1. grid-column-start属性，grid-column-end属性，grid-row-start属性，grid-row-end属性

用来指定项目的四个边框，分别定位在哪根网格线

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

2.grid-column属性，grid-row属性

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

.item {
  grid-column: 3/5;
  grid-row: 1/3;
}

3.grid-area

指定项目放在哪一个区域

.container {
  display: grid;
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
  border: 1px solid black;
  grid-template-areas: 'a b c'
    'd e f'
    'g h i'
}
.item-1 {
  grid-area: e;
}
将1单元格放到e区域

效果图：

grid-area.png

• grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

4.justify-selft属性，align-self属性，place-self属性

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

place-self: <align-self> <justify-self>

属性值：

• start：对齐单元格的起始边缘
• end：对齐单元格的结束边缘
• center：单元格内部居中
• stretch：拉伸，占满单元格的整个宽度（默认值）