Grid Layout

Posted cheyenne-007

tags:

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

.wrapper {
  display: grid;        /*wrapper的显示按照grid的属性  */
  grid-template-columns: repeat(3, 1fr);    /*grid-template-columns 为属性定义,定义网格   repeat为重复,其中第一个参数代表重复次数  fr为按照容器宽度计算后的基本单位*/
  grid-gap: 10px;                   /*设置网格间隔10像素*/
  grid-auto-rows: minmax(100px, auto);       
}
.one {
  grid-column: 1 / 3;        /*定义one占据范围为左到距右边界三分之一处*/
  grid-row: 1;           /*定义长度为默认长度*/
}
.two { 
  grid-column: 2 / 4;      /*定义two占据左半边*/
  grid-row: 1 / 3;        /*定义其长度为默认两倍*/
}
.three {
  grid-column: 1;      /*定义其长度为下一个网格的一倍*/
  grid-row: 2 / 5;      /*定义长度为下一网格的5/2倍*/
}
.four {
  grid-column: 3;        /*定义长度为该网格的第几部分*/
  grid-row: 3;          /*定义其起始位置为第三列*/
}
.five {
  grid-column: 2;          /*定义起始位置为第二列*/
  grid-row: 4;            /*定义起始位置为第四根网格线*/
}
.six {
  grid-column: 3;            /*定义起始位置为第三网格线*/
  grid-row: 4;               /*定义起始位置为第四网格线*/
}

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

Android陆地/端口布局结构不起作用

(17)Blender源码分析之闪屏窗口的菜单显示过程

(17)Blender源码分析之闪屏窗口的菜单显示过程

知识归纳-网格布局-grid

grid布局

grid布局