CSS—— grid 网格布局

1. grid 网格布局

1. display:grid
2. grid 属性是以下属性的简写属性,默认:
   1. grid-gap ， none，【200px】网格之间的距离
   2. grid-template-rows， none ， 行的尺寸
   3. grid-template-columns · ，none 【auto auto auto auto，有 几 列就设置几个】 ，列的宽度
   4. grid-template-areas· ，auto， 规定使用命名项目的网格布局
   5. grid-auto-rows ， auto，行的尺寸（高度）
   6. grid-auto-columns. ， auto，列的自动尺寸
   7. grid-auto-flow ， row，如何放置自动就位的项目
3. 常搭配css :
   1. justify-content 【对齐弹性容器的项目】属性用于在容器内对齐整个网格。
   2. align-content 属性用于垂直对齐容器内的整个网格。
   3. grid-column: 1 / 5;` Item1 将在 column 1 开始，并在 column 5 之间结束：
   4. grid-column: 1 / span 3;
   5. grid-row: 1 / 4;
   6. grid-row: 1 / span 2;
   7. grid-area: 1 / 2 / 5 / 6; 第1行第2列开始，第5行第6列结束
   8. grid-area: 2 / 1 / span 2 / span 3;第2行第1列开始，横跨2行3列
   9. grid-template-areas: ‘myArea myArea . . .’; 句号表示没有名称的网格项目
      9.2 .如需定义两行，请在另一组撇号内定义第二行的列： grid-template-areas: ‘myArea myArea . . .’ ‘myArea myArea . . .’;