網(wǎng)頁(yè)制作Grid布局
發(fā)布時(shí)間:2021-07-05來源:admin
Grid布局也叫網(wǎng)格布局,同樣是一種新的強(qiáng)大的布局方式。<br />
Grid布局的實(shí)現(xiàn)方式是將網(wǎng)頁(yè)劃分為一個(gè)個(gè)網(wǎng)格,通過組合不同的網(wǎng)格,做出各種各樣的布局。<br />
Grid布局與以前的布局,如Flex相比有什么不同呢?<br />
Flex布局針對(duì)軸線進(jìn)行布局,Grid劃分行和列,然后指定元素所在位置,Grid能更準(zhǔn)確方便的達(dá)成我們想要的布局效果,無(wú)疑是一種更好用的布局方式<br />
現(xiàn)在Gird和Flex一樣瀏覽器內(nèi)置了,通過css樣式屬性就能使用,display:grid指定容器采用網(wǎng)格布局,和Flex一樣Grid屬性分為了容器屬性和項(xiàng)目屬性。<br />
容器屬性grid-template-columns定義每一列的寬度,grid-template-rows定義每一行的高。比如:<br />
display:grid<br />
grid-template-columns:100px 100px 100px;<br />
grid-template-rows:100px 100px 100px;<br />
這就設(shè)置了容器是一個(gè)三行三列且寬高都為100px的網(wǎng)格;<br />
更詳細(xì)使用方式請(qǐng)參考官方教程。<br />
聯(lián)系方式: 0755-84185494