雖遲但到, 一直習(xí)慣flex布局, 最近也學(xué)會了grid布局, 還兼容了IE瀏覽器, 雖然IE瀏覽器已經(jīng)停止支持了[再見],但是還是要支持.
grid的好處就是相比flex更加靈活, 可以自動控制, 通過設(shè)置grid-area, 來控制.
首先display:grid; IE需要寫-ms-grid.
grid-template-columns: repeat(5, 1fr); 控制多少一行多少列, 比如這邊repeat表示重復(fù), 5, 1fr表示一行5列. 而兼容IE就需要寫5個1fr, `1fr 1fr 1fr 1fr 1fr`, 注意沒有逗號都是空格.
grid-row-start和grid-row-end控制從哪行開始, 哪行結(jié)束.
grid-column-start和grid-column-end控制從哪列開始, 哪列結(jié)束
因為IE沒有流的概念, 所以需要每一個字自己寫, 用css的:nchild(n)來控制.
> li:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
而一行的高度, 為了兼容IE, 需要以下設(shè)置
-ms-grid-row-span: 2; 可以控制row的長度變化, 可以根據(jù)設(shè)置的這一 行的長度來動態(tài)改變row的高度.
總體而言, 覺得grid的設(shè)置比flex復(fù)雜, 但是更加靈活.
鄭重聲明：本文內(nèi)容及圖片均整理自互聯(lián)網(wǎng)，不代表本站立場，版權(quán)歸原作者所有，如有侵權(quán)請聯(lián)系管理員(admin#wlmqw.com)刪除。
