CSS：grid网格布局、rem布局、响应式布局

Grid网格布局是一个二维的布局方法，纵横两个方向总是同时存在。

grid-template-columns和grid-template-rows
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

grid-template-areas和grid-template
area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于哪个区。
grid-template是Grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。

grid-column-gap和grid-row-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。

justify-items和align-items
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。
align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。

justify-content和align-content
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的水平分布方式。place-content可以让align-content和justify-content属性写在一个css声明中。

作用在grid子项上的css属性

rem布局

单位：
em：是一个相对单位，1em等于当前元素或父元素的font-size值
rem:是一个相对单位，1rem等于根元素的font-size值
vw/vh:把屏幕分为100份，1vw等于屏幕宽的1%

rem => root + em

动态设置font-size:
通过Js
通过vw
注： 要给Body重置一下font-size:16px(rem换算之后不会受到html字体的影响)

响应式布局

利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。（适合做中小型项目）

常见选项：
媒体类型：
and | not
min-width\max-width
orientation:portrait(纵屏)、orientation:landscape（横屏）

<link>

常见修改样式
display
float
width
注：响应式代码写到要适配的css后面。