css3中网格布局(grid)的基本介绍

一、css3中网格布局

类似传统的web开发中的表格,只是没表格那么复杂

• 1、定义一个容器使用网格布局

  .grid{
      display:grid;
  }

• 2、定义占用几行与几列(需要定义在父元素容器中)

  • 1、平均分几列

    .grid{
        grid-template-columns: repeat(3, 1fr);/*表示平均分3列*/
    }

  • 2、根据指定的宽度分列

    .grid{
        /*表示分4列,第一列150px,第二列100px,第三列50px,第四列占剩余的空间*/
        grid-template-columns: 150px 100px 50px 1fr;
    }

  • 3、行的使用跟列的使用一样的

    .grid{
        grid-template-rows: repeat(10,1fr);
    }

• 3、定义单个的容器占用行的区域

  .item:nth-child(1){
      /*grid-column表示占用列的空间:1从哪里开始,到4前面*/
      grid-column: 1/4;
  }

• 4、同理grid-row表示占用行的空间区域

• 5、grid-column-start指定哪列从哪里开始

• 6、grid-gap: 1px;表示网格的缝隙