效果图如上所示
<!DOCTYPE html><html><head> ???<title>练习</title></head><body><link rel="stylesheet" type="text/css" href="file:///D:/Sublime%20Text%203/Sublime%20Text%203/%E4%BB%A3%E7%A0%81/Css%E5%AE%9E%E9%AA%8C"><div class="container"> ?<div class="one">One</div> ?<div class="two">Two</div> ?<div class="three">Three</div> ?<div class="four">Four</div> ?<div class="five">Five</div> ?<div class="six">Six</div></div></body></html>
.container{ ??display: grid; ?grid-template-columns: 60px 60px 60px; ?grid-auto-rows: 60px 60px 60px 60px; ?background: pink; ?color: purple;}.one{ ?grid-column-start: 1; ?grid-row-start: 1; ?grid-row-end: 2; ?grid-column-end: 4; ?background: orange;}.two{ ?grid-column-start: 1; ?grid-row-start: 2; ?grid-column-end: 2; ?grid-row-end: 5; ?background: green;}.three{ ?grid-column-start: 2; ?grid-row-start: 2; ?grid-column-end: 3; ?grid-row-end: 3; ?background: black;}.four{ ?grid-column-start: 2; ?grid-row-start: 3; ?grid-row-end: 4; ?grid-column-end: 3; ?background: yellow; ?}.five{ ?grid-column-start: 2; ?grid-row-start: 4; ?grid-column-end: 3; ?grid-row-end: 5; ?background: red; ?}.six{ ?grid-column-start: 3; ?grid-row-start: 2; ?grid-column-end: 4; ?grid-row-end: 5; ?background:blue; ?}CSS Grid
原文地址：https://www.cnblogs.com/taogao3364/p/9721627.html