Container
定义网格的行数和列数
grid-template-columns: 12px 12px 12px;
grid-template-rows: 12px 12px 12px;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr)
grid-template-columns: 8px auto 8px;
grid-template-rows: 8px auto 12px;
grid-template-columns: 20% 20% auto;
grid-template-rows: 20% auto 20%;
将网格内的元素横向排列
justify-item: start;
justify-item: end;
justify-item: center;
justify-item: stretch;
将网格内的元素纵向排列
justify-item: start;
justify-item: end;
justify-item: center;
align-item: stretch;
将网格内的元素视为整体横向排列
justify-content: start;
justify-content: end;
justify-content: center;
justify-content: stretch;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
将网格内的元素视为整体纵向排列
align-content: start;
align-content: end;
align-content: center;
align-content: stretch;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;
指定网格行列间的间隙
grid-row-gap: 1px;
grid-column-gap: 9px;
grid-gap: 1px 9px;
grid-gap: 6px;
由算法自动排列元素
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: row;
grid-auto-flow: row dense;