?1 <!DOCTYPE HTML> ?2 ?<!DOCTYPE html> ?3 <html> ?4 ?<head> ?5 ????<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ?6 ?????<title> ?7 ?????????网格布局 ?8 ?????</title> ?9 ????<style type="text/css"> 10 ?????wrapper{ 11 ????display: grid; 12 ??grid-template-columns: repeat(4,100px); 13 ???/* grid-gap: 10px;*/ 14 ??grid-auto-rows: 100px; 15 } 16 ?17 ?18 .one{ 19 ??display: inline-block; 20 ????width: 400px; 21 ????height: 300px; 22 ????background: green; 23 ????color:black; 24 ?????grid-column: 1 / span 4; 25 ?????grid-row: 1 / 2; ???26 } 27 .two{ 28 ??display: inline-block; 29 ????width: 100px; 30 ????height: 500px; 31 ????background: black; 32 ????color:black; 33 ?????grid-column: 1 / 2; 34 ?????grid-row: 2 / 3; ???35 } 36 ?37 .three{ 38 ??display: inline-block; 39 ????width: 500px; 40 ????height: 200px; 41 ????background: red; 42 ????color:black; 43 ?????grid-column: 2 / 3; 44 ?????grid-row: 2 / 3; ???45 } 46 .four{ 47 ??display: inline-block; 48 ????width: 200px; 49 ????height: 100px; 50 ????background: red; 51 ????color:black; 52 ?????grid-column: 3 / 4; 53 ?????grid-row: 2 / 3; ???54 } 55 .five{ 56 ??display: inline-block; 57 ????width: 300px; 58 ????height: 200px; 59 ????background: pink; 60 ????color:black; 61 ?????grid-column: 4 / 5; 62 ?????grid-row: 2 / 3; ???63 } 64 .six{ 65 ??display: inline-block; 66 ????width: 100px; 67 ????height: 200px; 68 ????background: lime; 69 ????color:yellow; 70 ?????grid-column: 5 / 6; 71 ?????grid-row: 2 / 3; ???72 } 73 .seven{ 74 ??display: inline-block; 75 ????width: 200px; 76 ????height: 100px; 77 ????background: blue; 78 ????color:black; 79 ?????grid-column: 2 / 3; 80 ?????grid-row: 3 / 4; ???81 } 82 .eight{ 83 ??display: inline-block; 84 ????width: 200px; 85 ????height: 100px; 86 ????background: purple; 87 ????color:black; 88 ?????grid-column: 3 / 4; 89 ?????grid-row: 3 / 4; ???90 } 91 .nine{ 92 ??display: inline-block; 93 ????width: 100px; 94 ????height: 100px; 95 ????background: seagreen; 96 ????color:black; 97 ?????grid-column: 4 / 5; 98 ?????grid-row: 3 / 4; ???99 }100 ?</style>101 ?102 ?</head>103 ??<body>104 ???<div class="one">One</div>105 ???<div class="two">Two</div>106 ???<div class="three">Three</div>107 ???<div class="four">four</div>108 ???<div class="five">Five</div>109 ???<div class="six">Six</div>110 ???<div class="seven">Seven</div>111 ???<div class="eight">Eight</div>112 ???<div class="nine">Nine</div>113 ????</div> 114 </body> </html>115 116 .web学习-grid
原文地址：https://www.cnblogs.com/meteorll/p/9829436.html