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