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;
}

這裡，中間有一個控制元件，固定大小，永遠處於頁面的中間