Grid網格布局
就是通過設置百分比，或者默認劃分的單位個數，來達到寬度自適應的效果
比如，頁面控件的寬度，設置自適應隨著顯示器的寬度的增加而增加，網頁永遠占滿整個屏幕

.searchContentRowTopStyle {display: -ms-grid;display: grid;-ms-grid-columns: 3% 10% 21% 10% 21% 10% 21% 4%;grid-template-columns: 3% 10% 21% 10% 21% 10% 21% 4%;-ms-grid-rows: 10px;grid-template-rows: 10px; }.rowleft {-ms-grid-column: 1;-ms-grid-row: 1; }.rowOnelineOne {-ms-grid-column: 2;-ms-grid-row: 1; }.rowOnelineTwo {-ms-grid-column: 3;-ms-grid-row: 1; }.rowOnelineThree {-ms-grid-column: 4;-ms-grid-row: 1; }.rowOnelineFour {-ms-grid-column: 5;-ms-grid-row: 1; }.rowOnelineFive {-ms-grid-column: 6;-ms-grid-row: 1; }.rowOnelineSix {-ms-grid-column: 7;-ms-grid-row: 1; }.rowright {-ms-grid-column: 8;-ms-grid-row: 1; }

這里，設置了8列，兩邊為邊距，中間的三對，每個對是一個label和一個具體的控件，input、select、datetime

.searchButtonRowStyle {display: -ms-grid;display: grid;-ms-grid-columns: 50% 50%;grid-template-columns: 50% 50%;-ms-grid-rows: 10px;grid-template-rows: 10px; }

這里，頁面上兩個表格，并排顯示各占一半屏幕

.datetimeTwoStyle{display: -ms-grid;display: grid;-ms-grid-columns: auto 20px auto;grid-template-columns: auto 20px auto;-ms-grid-rows: 10px;grid-template-rows: 10px; }

這里，中間有一個控件，固定大小，永遠處于頁面的中間

總結

以上是生活随笔為你收集整理的CSS的Grid网格布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。