学会了grid布局
虽迟但到,一直习惯flex布局,最近也学会了grid布局,还兼容了IE浏览器,虽然IE浏览器已经停止支持了〔再见〕,但是还是要支持。
grid的好处就是相比flex更加灵活,可以自动控制,通过设置gridarea,来控制。
首先display:grid;IE需要写msgrid。
gridtemplatecolumns:repeat(5,1fr);控制多少一行多少列,比如这边repeat表示重复,5,1fr表示一行5列。而兼容IE就需要写5个1fr,1fr1fr1fr1fr1fr,注意没有逗号都是空格。
gridrowstart和gridrowend控制从哪行开始,哪行结束。
gridcolumnstart和gridcolumnend控制从哪列开始,哪列结束
因为IE没有流的概念,所以需要每一个字自己写,用css的:nchild(n)来控制。
li:nthchild(2){
msgridrow:1;
msgridcolumn:2;
}
而一行的高度,为了兼容IE,需要以下设置
msgridrowspan:2;可以控制row的长度变化,可以根据设置的这一行的长度来动态改变row的高度。
总体而言,觉得grid的设置比flex复杂,但是更加灵活。