gird

Posted 128lian

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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. }
  7. .wrapper div{
  8. border: 1px solid black;
  9. text-align: center;
  10. line-height: 100px;
  11. }

效果

技术分享图片

 

定义一个格子的大小

 

  1. .one{
  3. grid-column: 1 / 3;   /*定义列的位置 */
  5. grid-row: 1/ 3;  /*定义行的位置*
  6. }

以上是关于gird的主要内容，如果未能解决你的问题，请参考以下文章

Gird

Gird Layout代码解释

Display Voxel Gird and PCA

Selenium2+python自动化-gird分布式（转载）

Selenium2+python自动化-gird分布式（转载）

selenium Gird2——浏览器参数化和与分布式测试