一分鐘幾個(gè)樣式示例就可以掌握前端CSS Grid宮格布局
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
“CSS Grid布局的精髓,從基礎(chǔ)知識(shí)到高級(jí)技巧,深入剖析其無(wú)與倫比的設(shè)計(jì)潛力。無(wú)論您是初學(xué)者還是資深開(kāi)發(fā)者,這篇文章都將為您呈現(xiàn)一個(gè)全新的視角” 01 — 解鎖布局的新維度 // 開(kāi)啟grid布局 .grid-tag { display: grid; } 你可以使用以下代碼示例 .grid-tag{ display: grid; grid-template-columns: 1fr 1fr; // 你也可以使用 repeat(2,1fr) 第一個(gè)參數(shù)多少等份 /*grid-template-columns:200rpx 200rpx; // 使用固定的寬度*/ /*grid-template-columns: 1fr 1fr 1fr; // 三列布局*/ } .grid-tag{ display: grid; grid-template-columns: 2fr 1fr; } .grid-tag{ display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; // 統(tǒng)一設(shè)置行列間距 /*column-gap: 20rpx; // 列間距,元素的左右間距*/ /*row-gap: 20rpx; // 行間距,上下元素的間距*/ } .grid-tag{ display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; align-items: center; // 垂直方向?qū)R方式 center 居中對(duì)齊 end 靠下對(duì)齊 justify-items: center; // 水平方向?qū)R方式 center 居中對(duì)齊 end 靠下對(duì)齊 } 02 — Grid常用屬性一覽以及例圖欣賞
03 — 結(jié)束 該文章在 2024/3/30 0:25:42 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |