css3 grid栅格布局

前言

说实话，长这么大还从没用过栅格布局，都是在各个css面试题上了解，今天来系统的学习一下。

知识点

.father {
            display: grid; 
            /* display: inline-grid; */ 
            border: 1px solid #000;
            width: 1000px;
            height: 600px;
            /* grid-template-columns: 100px 100px 100px; 3列，每一列的列宽均是100px */
            /* grid-template-rows: 100px 100px 100px; 3行，每一行的行高均是100px */
            /* grid-template-columns: repeat(3, 100px); /* 3列，每一列的列宽均是100px，repeat可以重复 */
            /* grid-template-rows: repeat(3, 100px); /*3行，每一行的行高均是100px，repeat可以重复*/

        }

.father div {
            border: 1px solid #000;
        }

九宫格

display: grid; 
grid-template-columns: 100px 100px 100px; 
grid-template-rows: 100px 100px 100px;

使得盒子内部的每一列宽度都是100px，使得盒子内部的每一列行高度都是100px。

两栏式布局

  display: grid;
  grid-template-columns: 70% 30%;

空隙九宫格

display: grid; 
grid-template-columns: 100px 100px 100px; 
grid-template-rows: 100px 100px 100px;
grid-row-gap: 20px; //缝隙
grid-column-gap: 20px; //缝隙