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後面。