gird

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>grid</title>
  5. <link rel="stylesheet" type="text/css" href="grid.css">
  6. </head>
  7. <body>
  8. <div class="wrapper">
  9. <div class="one">1</div>
  10. <div class="two">2</div>
  11. <div class="three">3</div>
  12. <div class="four">4</div>
  13. <div class="five">5</div>
  14. <div class="six">6</div>
  15. </div>
  16. </body>
  17. </html>

css代码

  1. .wrapper{
  2. display: grid;
  3. grid-template-columns: 100px 100px 100px;     /*设置列的大小*/
  4. grid-template-rows: 100px 100px;            /*设置行的大小*/
  5. }
  6. .wrapper div{
  7. border: 1px solid black;
  8. text-align: center;
  9. line-height: 100px;
  10. }

效果

定义一个格子的大小

  1. .one{
  2. grid-column: 1 / 3;   /*定义列的位置 */
  3. grid-row: 1/ 3;  /*定义行的位置*
  4. }
原文地址:https://www.cnblogs.com/128lian/p/9716173.html