雖遲但到, 一直習(xí)慣flex布局, 最近也學(xué)會(huì)了grid布局, 還兼容了IE瀏覽器, 雖然IE瀏覽器已經(jīng)停止支持了[再見(jiàn)],但是還是要支持.
grid的好處就是相比f(wàn)lex更加靈活, 可以自動(dòng)控制, 通過(guò)設(shè)置grid-area, 來(lái)控制.
首先display:grid; IE需要寫(xiě)-ms-grid.
grid-template-columns: repeat(5, 1fr); 控制多少一行多少列, 比如這邊repeat表示重復(fù), 5, 1fr表示一行5列. 而兼容IE就需要寫(xiě)5個(gè)1fr, `1fr 1fr 1fr 1fr 1fr`, 注意沒(méi)有逗號(hào)都是空格.
grid-row-start和grid-row-end控制從哪行開(kāi)始, 哪行結(jié)束.
grid-column-start和grid-column-end控制從哪列開(kāi)始, 哪列結(jié)束
因?yàn)镮E沒(méi)有流的概念, 所以需要每一個(gè)字自己寫(xiě), 用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的高度.
總體而言, 覺(jué)得grid的設(shè)置比f(wàn)lex復(fù)雜, 但是更加靈活.
