<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <style> * {margin: 0;padding: 0;} html,body {width: 100%;height: 100%;} .container { display: grid; grid-template-columns: 33.333333% 33.333333% 33.333333%; grid-template-rows: auto; } .item { background-color: #444; color: #fff; font-size: 150%; padding: 20px; margin: 3.333333%; } .item-5 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 4; } .item-7 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 4; grid-row-end: 4; } .item-12 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 6; grid-row-end: 6; } </style> </head> <body> <div class="container"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item item-5">5</div> <div class="item item-6">6</div> <div class="item item-7">7</div> <div class="item item-8">8</div> <div class="item item-9">9</div> <div class="item item-10">10</div> <div class="item item-11">11</div> <div class="item item-12">12</div> </div> </body> </html>
grid-layout实验
猜你喜欢
转载自www.cnblogs.com/lldy/p/9710647.html
今日推荐
周排行