免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

Grid實現九宮格布局？N宮格怎么實現？

2013-05-22    分類： 網站建設

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

@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;

}

網站名稱：Grid實現九宮格布局？N宮格怎么實現？
文章分享：http://m.newbst.com/news/786.html

成都網站建設公司_創新互聯，為您提供企業建站、定制開發、網站設計公司、ChatGPT、全網營銷推廣、動態網站

廣告

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

綿陽服務器托管