css之grid布局

1. grid 基本属性

   • fr[grid 独有的单位，用来处理剩余空间分配比例的弹性单位]，或者他们得任意组合，比如： **grid-template-columns: 200px 20% 1fr;**表示总容器[800px]-第一个列宽[200px]-第一个列间距[30px]-第二个列宽 [20%*800px=160px] -第二个列间距 [30px]- 第三个的边框[2px] = 398px

   • 实例：

     /* 将容器设置为grid布局，设置为两行三列 ,行列间距分别为20px，30px*/
     .container {
       width: 800px;
       height: 600px;
       border: 1px solid;
       margin: 20px auto;
       display: grid;
       grid-template-rows: 200px 200px;
       /* grid-template-rows: repeat(2, 200px);简写，两列 */
       grid-template-columns: 200px 200px 200px;
       /* grid-template-areas: 'a b c'
           'd e f'
         ; */
       row-gap: 20px;
       column-gap: 30px;
       justify-items: end;
       align-items: center;
       /* justify-content: center;
         align-content: center; */
       /* place-items: align-items的对齐方式 justify-items的对齐方式; */
       /* place-content: align-content的对齐方式 justify-content的对齐方式; */
     }
     .item {
       width: 100px;
       height: 100px;
       background-color: rebeccapurple;
       /* grid-area: f; */
     }
     .item:nth-child(1) {
       grid-row-start: 2;
       grid-column-start: 2;
       /* end有span属性[表示为网格项的放置提供网格跨度，这样网格项的网格区域的行结束边缘时从起始边缘开始的n行] */
       /* grid-row-end: 3 ; */
       grid-row-end: span 1;
       grid-column-end: 3;
       /*缩写方式一*/
       /* grid-column:grid-column-start / grid-column-end;
     grid-row: grid-row-start / grid-row-end; */
       /*缩写方式二*/
       /* grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; */
       /* grid-row: 2 / 2 / span 1 / span 1; */
     }
     .item:nth-child(2) {
       justify-self: center;
       align-self: center;
     }
     .item:nth-child(3) {
       justify-self: center;
       align-self: center;
     }
     

2. grid 容器属性[作用在容器上]：

   • grid-template-columns 设置列宽和列数
   • grid-template-rows 设置行宽和行高
   • grid-template-areas 划分区域和合并单元格[需要配合子项属性使用]
   • 设置行间距,列间距

     row-gap: 20px; /*行间距值*/
     column-gap: 30px; /*列间距值*/
     /*缩写方式*/
     grid-gap: 行间距值 列间距值;
     

   • 单元格整体对齐方式

     justify-items: center;
     align-items: center;
     /*缩写方式*/
     place-items: align-items的对齐方式 justify-items的对齐方式;
     

   • 内容区域对齐

     justify-content: center; /*水平*/
     align-content: center; /*垂直*/
     /*缩写方式*/
     place-content: align-content的对齐方式 justify-content的对齐方式;
     

3. grid 子容器属性[作用在子元素上]

   • grid-area: e; 将指定区域放在父容器定义的对应名称 f 的位置上

   • 指定某一个子元素在父容器中的位置[从哪一行哪一列开始到哪一行哪一列结束]

     grid-row-start: 2;
     grid-column-start: 2;
     /* end有span属性[表示为网格项的放置提供网格跨度，这样网格项的网格区域的行结束边缘时从起始边缘开始的n行] */
     /* grid-row-end: 3 ; */
     grid-row-end: span 1;
     grid-column-end: 3;
     /*缩写方式一*/
     /* grid-column:grid-column-start / grid-column-end;
      grid-row: grid-row-start / grid-row-end; */
     /*缩写方式二*/
     /* grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; */
     /* grid-row: 2 / 2 / span 1 / span 1; */
     /*和父容器的grid-template-areas属性配合结果相同*/
     /*grid-area: e;*/
     

   • 单个单元格原色的独立对齐方式

     justify-self: center;
     align-self: center;