grid布局初尝试

Posted 2021-02-12 brand-code

第一次使用Grid，仅供学习交流，大神勿喷~~

【网格容器部分】

一：【display】通过设置display属性为grid或者inline-grid创建一个网格容器。这样网格中的所有子元素就自动成为网格项目。

二：使用grid-template-rows和grid-template-columns属性设置网格的行和列：默认都是none;

  grid-template-rows: 50px 40px;   //设置了两行，第一行 行高50px，第二行 行高40px；

　还可使用minmax()函数定义一个大概范围：grid-template-rows: minmax(50px, 100px) 40px; 表示：第一行 行高在50px~100px之间的任一随机值。

　grid-template-columns使用同grid-template-rows一样。

三：【fr】grid新增单位，表示网格中所占的空间。类似flex布局中的flex：1；

四：【repeat()】用于创建重复的网格轨道。第一个参数：表示重复的次数；第二个参数表示没个尺寸；

Example：grid-template-rows: repeat(3, 1fr)  表示：创建三行网格，每一行行高1fr;

　　　　　grid-template-columns: 30px repeat(3, 1fr) 30px; 表示：第一列的宽度30px，再重复创建三列，每一列的宽度为1fr，最后一列宽30px；

五：【间距】：可以设置任何非负值

 grid-column-gap: 创建列与列之间的间距；  grid-row-gap：创建行与行之间的间距；

grid-gap 同时设置两个值，如果只写一个则表示行与行，列与列之间的间距相等；

【网格项目部分】

待续……