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