CSS Grid布局入门
1.普通版
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Css Grid Demo</title> <style> .container { display: grid; grid-gap: 5px; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; 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-color:blue; } .menu { grid-area: m; background-color:black; } .content { grid-area: c; background-color:red; } .footer { grid-area: f; background-color:blue; } </style> </head> <body> <div class="container"> <div class="header">HEADER</div> <div class="menu">MENU</div> <div class="content">CONTENT</div> <div class="footer">FOOTER</div> </div> </body> </html>
2.升级版
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS Grid Demo</title> <style type="text/css"> html,body{ height:100%; } body { margin: 0px; } .container{ height:100%; display:grid; grid-gap:0.5%; grid-template-columns: repeat(12, 1fr); grid-template-rows: 18.5% 60% 18.5%; 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-color:red; } .menu{ grid-area:m; background-color:blue; } .content{ grid-area:c; background-color:yellow; } .footer{ grid-area:f; background-color:black; } </style> </head> <body> <div class="container"> <div class="header"></div> <div class="menu"></div> <div class="content"></div> <div class="footer"></div> </div> </body> </html>
课后作业:
1.复制上述代码,预览查看效果。
2.读懂上述代码。
如果有问题：查看专家博客:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html