網格佈局

• 以前使用table佈局，但是table佈局需要把表格渲染完畢後纔會渲染表格內部的內容，性能不好。
• 再到DIV+CSS浮動佈局，再到position佈局，再到inline，這幾種都叫hack佈局。
• flex佈局，flex佈局是一維的。
• 再到Grid佈局，Grid是二維的

1.概念

• Grid Container：元素應用爲display:grid;，所有網格項的父元素
• Grid Item：網格項
• Grid Line：網格線：組成網格項的分界線
• Grid Track：網格軌道，兩個相鄰的網格線之間爲網格軌道
• Grid Cell:網格單元
• Grid Area：網格區域
  
  
  
  

網格容器屬性

• display：grid | inline-grid | subgrid
  當元素設置網格佈局後，column、float、clear、vertical-aling無效

grid-template-columns/grid-template-rows

• grid-template-colums:規定有多少列
• grid-template-rows：規定有多少行
  
  規定多少列就有多少列，如果規定的網格項不能裝下所有內容就會增加網格的行。

定義網格線的名字

grid-template-columns: [frist] 10px [line2] 10px [line3] 10px [end]

grid-template-areas

grid-template-areas: "header header header header"
                           "main main . sideabr"
                           "footer footer footer footer";

gap：行/列間距

也可以認爲是網格線的大小
不能設置不同的間隙

簡寫：

grid-gap:20px 30px; // row column
gap: 20px 30px;

以上兩種寫法都可以，如果只寫一個值表示行列間隙一樣

items對齊方式

items指的是網格項內容的對齊方式

justify-items: start | center | end | strech(默認) // 行
aling-items: start | center | end | strech(默認) // 列

簡寫

place-items: start end; // 列 行

content對齊方式

content指的是網格單元的對齊方式

justify-content: start(默認) | end | center | stretch | space-between | space-around | space-evenly
aling-content:start | stretch | end | center | space-betweem | space-around | space-evenly

簡寫

space-content: end end; // 列 行

CSS函數

repeat

repeat只能作用在grid-template-columns和grid-template-rows

repeat(number， value) // 重複次數，值
// 使用
grid-template-columns: repeat(1fr, 7)

fit-content

grid-template-columns: fit-content(200px) 
// 表示如果網格項內容不足200px，按照網格項內的內容的寬度；如果大於200px就按照200px

minmax()取值範圍

grid-template-columns: minmax(20px, 30px)

網格項屬性

start-end

grid-column-start: 2; // 表示重第二列開始佈局
grid-column-start: span 2; // 表示重原本的位置開始數，向後的第二個位置
grid-column-start: span line3; // 表示重名字爲line3的開始
grid-column-start: -2; // 表示倒數第二個

如果給定的值大於最大的網格線數，會創建虛擬的網格；
網格項可以相互重疊。可以使用z-index控制它們的堆疊順序

簡寫

grid-area

self

• justify-self
• aling-self