CSS Grid 布局是一種二維布局方式，可以將頁面分成行和列，并在其中放置元素，使用 Grid 布局時，需要定義網格容器和網格專案，
第一步，在網格容器元素（通常是一個 div）上設定 display: grid; 來啟用 Grid 布局，
第二步，使用 grid-template-columns 和 grid-template-rows 屬性定義網格的行和列，例如，如果你想要創建一個 3x3 的網格，可以使用：
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);第三步，在網格容器內放置網格專案元素，使用 grid-column 和 grid-row 屬性來定位網格專案，例如，如果你想要將一個元素放在第一行第二列，可以使用：
grid-column: 2 / 3;
grid-row: 1 / 2;還有其他一些屬性可以幫助你更好地控制網格布局，例如 grid-gap （在網格中添加間距）、justify-content（水平對齊）、align-content（垂直對齊） 等，
除了上述的屬性外，還有一些其他的屬性可以幫助你更好地控制網格布局，這些屬性包括：
grid-template-areas: 指定網格的名稱和網格專案的布局，grid-area: 指定網格專案所在的網格區域，grid-column-start,grid-column-end,grid-row-start,grid-row-end: 分別指定網格專案在網格中的起始和結束位置，grid-auto-columns,grid-auto-rows: 指定網格中除了已定義行和列以外自動生成的行和列的大小，grid-auto-flow: 指定網格中空白區域如何填充網格專案，
使用 CSS Grid布局還有很多可能性，并且結合Flexbox 布局可以更好地控制元素的定位，
需要注意的是，這些屬性需要在網格容器上使用，而不是網格專案上使用，此外，CSS Grid 布局是一個相對新的技術，并不是所有瀏覽器都支持，因此，在使用前應檢查瀏覽器兼容性，
作者：yuzhihui
出處：http://www.cnblogs.com/yuzhihui/ 宣告：歡迎任何形式的轉載，但請務必注明出處！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541890.html
標籤：其他
上一篇：day08-Axios