思維導圖
參考網址: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout
一、什么是 grid？
????????CSS Grid布局是在CSS3規范中引入的一種新的布局方式，旨在解決傳統布局方法（如浮動、定位、表格布局）存在的許多問題。CSS Grid布局規范最早由W3C提出，經過多年的發展和標準化，于2017年成為W3C的推薦標準。
二、grid 布局相比 flex 布局有那些方便之處？
Html + Css 核心知識 - flex （超詳細）_html flex-CSDN博客
網格布局更為方便
問題場景一：例如想要實現頁面內顯示多個元素、每個元素大小尺寸間距相同、每行顯示個數固定、按行由左向右排序、且在頁面中均勻分布。如下所示
?
這時候很多人第一時間想到了 flex、單行用flex很方便、多行的話需要進行一些額外運算。
.father{height: 80vh;width: 80vw;background-color: #f5f5f5;display: flex;flex-wrap: wrap;align-content: start;gap: 10px;} .son{width: calc((100% - 50px) / 6);aspect-ratio: 1 / 1; /* 設置寬高比為1:1 */border: 1px solid red;box-sizing: border-box;}
?
那有沒有不用計算的方案呢！ grid 這時候就排上的用場了!
.father{height: 80vh;width: 80vw;background-color: #f5f5f5;display: grid;/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */grid-template-columns: repeat(6, 1fr); /* 定義六個等寬的列 */align-content: start;gap: 10px;} .son{/* width: calc((100% - 50px) / 6); */aspect-ratio: 1 / 1; /* 設置寬高比為1:1 */border: 1px solid red;box-sizing: border-box;}
?
問題場景二、實現等比例大小不同盒子布局、場景如下
?
這時候用其他方案處理就比較麻煩了、而 grid 就能很方便處理
.father{height: 80vh;width: 80vw;background-color: #f5f5f5;display: grid;/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */grid-template-columns: repeat(6, 1fr); /* 定義六個等寬的列 */align-content: start;gap: 10px;} .son{/* width: calc((100% - 50px) / 6); */aspect-ratio: 1 / 1; /* 設置寬高比為1:1 */border: 1px solid red;box-sizing: border-box;min-width: 200px;}#item1{grid-column: 1/3;grid-row: 1/3; }#item8{grid-column: 5/7;grid-row: 2/4; }根據可用空間自動填充列（這點個人覺得非常好用）。
.father{height: 80vh;width: 80vw;background-color: #f5f5f5;display: grid;/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));align-content: start;gap: 10px;} .son{/* width: calc((100% - 50px) / 6); */aspect-ratio: 1 / 1; /* 設置寬高比為1:1 */border: 1px solid red;box-sizing: border-box;}
?
可以看到寬度是被自動填充到333px
?
填充到了 359px
?
