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

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

总结

以上是生活随笔为你收集整理的CSS的Grid网格布局的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。