代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS Grid Show</title> <style type="text/css"> *{ margin:0; } html,body{ height:100%; } .container { height:100%; display: grid; grid-template-columns:repeat(8,1fr); grid-template-rows: repeat(8,1fr); } .a{ background-color:red; border:10px solid blue; grid-row-start: 1; grid-column-start: 1; grid-row-end: 2; grid-column-end: 2; margin:5px; } .d{ background-color:red; border:10px solid blue; grid-row-start: 1; grid-column-start: 7; grid-row-end: 2; grid-column-end: 9; margin:5px; } .b{ background-color:red; border:10px solid blue; grid-row-start: 7; grid-column-start: 1; grid-row-end: 9; grid-column-end: 3; margin:5px; } .c{ background-color:red; border:10px solid blue; grid-row-start:6; grid-column-start:7; grid-row-end:9; grid-column-end: 9; margin:5px; } .center{ border:2px solid #CCC; padding:5px; grid-row-start:4; grid-column-start:4; grid-row-end:6; grid-column-end: 6; background-image:url(http://doc.exesoft.cn/bg-view.jpg); background-size:100% 100%; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div class="container"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <div class="d">D</div> <div class="center">Center</div> </div> </body> </html>
课后作业:
1.复制上述代码,预览查看效果。
2.读懂上述代码。
如果有问题：查看专家博客:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html