生活随笔
收集整理的這篇文章主要介紹了
grid网格布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS3中的display:grid網格布局介紹
前端布局之網格gird布局（簡單易懂）
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" /> < title> 網格gird布局
</ title> < style> .box { width : 300px; height : 600px; background-color : pink; display : grid; align-items : center; justify-content : space-between; grid-auto-flow : column; } .box > span { height : 100px; background : gray; text-align : center; font-size : 24px; border : 2px solid white; } </ style> </ head> < body> < divclass = " box" > < span> 1
</ span> < span> 2
</ span> </ div> </ body> </ html> 效果圖
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" /> < title> 網格gird布局
</ title> < style> .box { width : 300px; height : 600px; background-color : pink; display : grid; align-content : center; justify-content : space-between; grid-auto-flow : column; } .box > span { height : 100px; background : gray; text-align : center; font-size : 24px; border : 2px solid white; } </ style> </ head> < body> < divclass = " box" > < span> 1
</ span> < span> 2
</ span> </ div> </ body> </ html> 效果圖
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" /> < title> 網格gird布局
</ title> < style> .box { width : 300px; height : 600px; background-color : pink; display : grid; align-items : center; justify-content : space-between; grid-auto-flow : column; grid-template-columns : 100px 100px 100px; grid-template-rows : 50px 50px; } .box > span { background : gray; text-align : center; font-size : 24px; border : 2px solid white; } </ style> </ head> < body> < divclass = " box" > < span> 1
</ span> < span> 2
</ span> < span> 3
</ span> < span> 4
</ span> < span> 5
</ span> < span> 6
</ span> </ div> </ body> </ html> 效果圖
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" /> < title> 網格gird布局
</ title> < style> .box { width : 300px; height : 600px; background-color : pink; display : grid; align-content : center; justify-content : space-between; grid-auto-flow : column; grid-template-columns : 100px 100px 100px; grid-template-rows : 50px 50px; } .box > span { background : gray; text-align : center; font-size : 24px; border : 2px solid white; } </ style> </ head> < body> < divclass = " box" > < span> 1
</ span> < span> 2
</ span> < span> 3
</ span> < span> 4
</ span> < span> 5
</ span> < span> 6
</ span> </ div> </ body> </ html> 效果圖
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" /> < title> 網格gird布局
</ title> < style> .box { width : 300px; height : 600px; background-color : pink; display : grid; grid-auto-flow : column; grid-template-columns : 1fr 2fr 3fr; grid-template-rows : 1fr 2fr; } .box > span { background : gray; text-align : center; font-size : 24px; border : 2px solid white; } </ style> </ head> < body> < divclass = " box" > < span> 1
</ span> < span> 2
</ span> < span> 3
</ span> < span> 4
</ span> < span> 5
</ span> < span> 6
</ span> </ div> </ body> </ html> 效果圖
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" /> < title> 網格gird布局
</ title> < style> .box { width : 300px; display : grid; align-items : center; grid-template-columns : 100px 100px 100px; grid-template-rows : 100px 100px 100px; } .box > span { padding : 31.5px 0; background : gray; text-align : center; font-size : 24px; border : 2px solid white; } .box { width : 300px; display : grid; grid-template-columns : 100px 100px 100px; grid-template-rows : 100px 100px 100px; } .box > span { background : gray; font-size : 24px; border : 2px solid white; display : grid; justify-items : center; align-items : center; } </ style> </ head> < body> < divclass = " box" > < span> 1
</ span> < span> 2
</ span> < span> 3
</ span> < span> 4
</ span> < span> 5
</ span> < span> 6
</ span> </ div> </ body> </ html> 效果圖
.box { width : 300px
; display : grid
; grid-template-columns : 100px 100px 100px
; grid-template-rows : 100px 100px 100px
; } .box > span { background : gray
; font-size : 24px
; border : 2px solid white
; display : grid
; justify-content : center
; align-content : center
; }
效果圖
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" /> < title> 網格gird布局
</ title> < style> .box { width : 300px; display : grid; grid-template-columns : 100px 100px 100px; grid-template-rows : 100px 100px 100px; } .box > span { background : gray; font-size : 24px; border : 2px solid white; display : grid; justify-items : center; align-items : center; } .item1 { grid-column-start : 1; grid-column-end : 4; } </ style> </ head> < body> < divclass = " box" > < spanclass = " item1" > 1
</ span> < spanclass = " item2" > 2
</ span> < spanclass = " item3" > 3
</ span> < spanclass = " item4" > 4
</ span> < spanclass = " item5" > 5
</ span> < spanclass = " item6" > 6
</ span> </ div> </ body> </ html> 效果圖
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" /> < title> 網格gird布局
</ title> < style> .box { width : 300px; display : grid; grid-template-columns : 100px 100px 100px; grid-template-rows : 100px 100px 100px; grid-gap : 5px 20px; } .box > span { background : gray; font-size : 24px; border : 2px solid pink; display : grid; justify-items : center; align-items : center; } </ style> </ head> < body> < divclass = " box" > < spanclass = " item1" > 1
</ span> < spanclass = " item2" > 2
</ span> < spanclass = " item3" > 3
</ span> < spanclass = " item4" > 4
</ span> < spanclass = " item5" > 5
</ span> < spanclass = " item6" > 6
</ span> </ div> </ body> </ html> 效果圖
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" /> < title> 網格gird布局
</ title> < style> .box { display : grid; grid-template-columns : repeat ( 12, 1fr) ; grid-template-rows : 50px 350px 50px; grid-gap : 5px; grid-template-areas : "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f" ; } .header { grid-area : h; background : greenyellow; } .menu { grid-area : m; background : blue; } .content { grid-area : c; background : coral; } .footer { grid-area : f; background : purple; } .box > div { font-size : 24px; text-align : center; } </ style> </ head> < body> < divclass = " box" > < divclass = " header" > header
</ div> < divclass = " menu" > menu
</ div> < divclass = " content" > content
</ div> < divclass = " footer" > footer
</ div> </ div> </ body> </ html> 效果圖
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" /> < title> 網格gird布局
</ title> < style> #page { display : grid; width : 100%; height : 250px; grid-template-areas : "head head" "nav main" "nav foot" ; grid-template-rows : 50px 1fr 30px; grid-template-columns : 150px 1fr; } #page > header { grid-area : head; background-color : #8ca0ff; } #page > nav { grid-area : nav; background-color : #ffa08c; } #page > main { grid-area : main; background-color : #ffff64; } #page > footer { grid-area : foot; background-color : #8cffa0; } </ style> </ head> < body> < sectionid = " page" > < header> Header
</ header> < nav> Navigation
</ nav> < main> Main area
</ main> < footer> Footer
</ footer> </ section> </ body> </ html> 效果圖
兩種水平垂直居中對齊理解
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" /> < title> 網格gird布局
</ title> < style> .box { width : 300px; height : 600px; background-color : pink; display : grid; align-items : center; grid-auto-flow : column; } .box > span { height : 100px; background : gray; display : grid; justify-items : center; align-items : center; font-size : 24px; border : 2px solid white; } </ style> </ head> < body> < divclass = " box" > < span> 1
</ span> < span> 2
</ span> </ div> </ body> </ html> 效果圖
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" /> < title> 網格gird布局
</ title> < style> .box { width : 300px; height : 600px; background-color : pink; display : grid; align-items : center; grid-auto-flow : column; } .box > span { height : 100px; background : gray; display : grid; justify-content : center; align-content : center; font-size : 24px; border : 2px solid white; } </ style> </ head> < body> < divclass = " box" > < span> 1
</ span> < span> 2
</ span> </ div> </ body> </ html> 效果圖
grid-template-areas講解
總結
以上是生活随笔 為你收集整理的grid网格布局 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
