Grid實現(xiàn)九宮格布局？N宮格怎么實現(xiàn)？

2013-05-22    分類： 網(wǎng)站建設

現(xiàn)在無論做APP還是做網(wǎng)站，宮格的布局也都是必然存在的，那么我們CSS如何實現(xiàn)九宮格布局呢？在css環(huán)境下，通過grid布局可以實現(xiàn)九宮格，并且支持設置有邊框或者無邊框，每個格子是否成正方形？

@include grid(3, 3, true); // 3 x 3, 有邊框, 且每個格為正方形

@include grid(2, 5, false, false); // 2 x 5, 無邊框

九宮格布局代碼

.container {

width: 300px;

height: 300px;

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-template-rows: 1fr 1fr 1fr;

grid-gap: 8px;

border: 1px solid #fac;

padding: 8px;

}

網(wǎng)頁標題：Grid實現(xiàn)九宮格布局？N宮格怎么實現(xiàn)？
地址分享：http://www.muchs.cn/news36/786.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、云服務器、電子商務、網(wǎng)站設計、商城網(wǎng)站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設