grid样式学习

1. grid          

   1. grid-template-columns 用于处理列 常用使用方式

      1. /* 来控制每一列的宽度  例如有三列可控制每一列宽度*/
         grid-template-rows: 200px 40px 100px;
         
         /* 分两列1:3平分 */
         grid-template-columns: 1fr 3fr;
         
         /* 分4列每列100px */
         grid-template-columns: repeat(4,100px);
         
         /* 三列平分父元素 */
         grid-template-columns: repeat(3,1fr);
         
         /* 控制一列最小值150px 最大1fr 自动填充 */
         grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
         
         

   2. grid-template-rows 用于处理行

      1. /* 跟列相同的方法都可以使用 */
         
         /* 来控制每一行的高度  例如三行可控制每一行*/
         grid-template-rows: 200px 40px 100px;
         
         /* 分4行每行100px */
         grid-template-rows: repeat(4,100px);
         
         /* 分两行1:3平分 */
         grid-template-rows: 1fr 3fr;
         
         /* 控制一行最小值150px 最大1fr 自动填充 */
         grid-template-rows: repeat(auto-fill, minmax(150px, 1fr));
         
         

   3. grid-column  

      1. /* 表示行从第一个格开始 到第三个格子结束 */
         grid-column-start: 1; 
         grid-column-end: 3;
         
         /* 可简写 */
         grid-column:1/3;

   4. grid-row-start

      1. /* 行设置格子 从上到下高度为第一格到第二个格 */
         grid-row-start: 1;
         grid-row-end: 2;
         
         /* 简写 */
         grid-row:1/2;

   5. gap

      1. /* 设置上下间距10px 左右间距20px */
         gap:10px 20px;

   6. grid-template-areas

      1. /* hearder . 表示两列 header在左侧 右侧用点占位
            aside article 表示这两个名字平分一行
            footer footer  表示独占一行
          */
         
         grid-template-areas: 
         "header ."
         "aside article"
         "footer footer"
         ;
         
         
         /* 上面想要使用header 需要在类名下添加grid-area属性 */
         grid-area: header;

              

   7. 跨列和跨行

      1. /* 跨列 */
         grid-column: span 2;
         
         /* 跨行 */
          grid-row: span 2;
         
         /* 跨行跨列 */
         /* 先行后列 */
         grid-area: span 2 / span 2;