虽迟但到, 一直习惯flex布局, 最近也学会了grid布局, 还兼容了IE浏览器, 虽然IE浏览器已经停止支持了[再见],但是还是要支持.
grid的好处就是相比flex更加灵活, 可以自动控制, 通过设置grid-area, 来控制.
首先display:grid; IE需要写-ms-grid.
grid-template-columns: repeat(5, 1fr); 控制多少一行多少列, 比如这边repeat表示重复, 5, 1fr表示一行5列. 而兼容IE就需要写5个1fr, `1fr 1fr 1fr 1fr 1fr`, 注意没有逗号都是空格.
grid-row-start和grid-row-end控制从哪行开始, 哪行结束.
grid-column-start和grid-column-end控制从哪列开始, 哪列结束
因为IE没有流的概念, 所以需要每一个字自己写, 用css的:nchild(n)来控制.
> li:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
而一行的高度, 为了兼容IE, 需要以下设置
-ms-grid-row-span: 2; 可以控制row的长度变化, 可以根据设置的这一 行的长度来动态改变row的高度.
总体而言, 觉得grid的设置比flex复杂, 但是更加灵活.
郑重声明：本文内容及图片均整理自互联网，不代表本站立场，版权归原作者所有，如有侵权请联系管理员(admin#wlmqw.com)删除。
