学会了grid布局 grid布局兼容

虽迟但到, 一直习惯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复杂, 但是更加灵活.