CSS的Grid网格布局

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

这里，中间有一个控件，固定大小，永远处于页面的中间