grid

Posted yixiaoyu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了grid相关的知识，希望对你有一定的参考价值。

html代码

 

  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;  /*定义行的位置*/
  7. }

 

效果图

技术分享图片

 

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

布局之Grid

布局之Grid

是否可以从动态变量实例化一个类？

顺风网格布局

如何使 WPF ComboBox 项目背景可见？

直角坐标系的常用配置