Grid网格布局

• 首先元素布局方式选择grid

body{
    display:grid;
}

• grid-template-columns
  • 分配一行里面占的列数

  body{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      /*
      或者用repeat(3,1fr)规定有三列
      */
  }
  

• grid-gap行列间距

  body{
      display:grid;
      grid-template-columns:1fr 3fr;
      grid-gap:1rem;
      /*
      此时body下的元素的行列间距就都是1rem
      */
  }
  

  • grid-row-gap行间距不需要再使用margin

  body{
      display:grid;
      grid-template-columns:1fr 2fr 1fr;
      grid-row-gap:1rem;
      /*
      同理列间距
      */
  }
  

  • grid-column-gap列间距 同理行间距用法
• grid-auto-rows行高

  body{
      display:grid;
      grid-template-columns:1fr 2fr 2fr;/* 3 列*/
      grid-auto-rows:minmax(100px,auto);/*minmax()规定了最小行高是100px*/
  } 
  

• justify-items规定的元素沿着行的起始位置/align-items规定元素沿着列的起始位置排列

1. start 规定沿着行/列的开始位置排列
2. end 规定元素沿着行/列的终点位置排列
3. center 规定元素沿着行/列的中间位置进行排列
4. stretch 默认值 规定元素撑满整个网格

• 同理元素本身也可以调整自身的行列排列位置==>justify-self/align-self

body{
    display:grid;
    grid-template-columns:1fr 2fr 3fr;
    grid-gap:1rem;
    justify-items:center;
    align-items:center;
}
body div{
    justify-self:start;
    align-self:end;
}

• 网格布局神器，自定义网格布局模板

  • grid-template-areas

  body{
      /*假设定义了一个三列四行的布局，其中的header，main，footer都是独占一行，由于是三列结构所以他们都是在一行之中占三列*/
      display:grid;
      grid-template-areas:
      'header header header'
      'aside content content'
      'main  main   main '
      'footer footer footer';
      /*这里规定网格布局的模板*/
      grid-gap:1rem;
  }
  header{
      grid-area:header;
  }
  aside{
      gird-area:aside;
  }
  div.content{
      grid-area:content;
  }
  div.main{
      grid-area:main;
  }
  footer{
      grid-area:footer;
  }
  /*网格布局，响应式布局更加简单*/
  @media screen and (max-width:720px){
      body{
          /*当屏幕宽度小于720px时候变成了单列单行排列*/
          grid-template-areas:
          'header'
          'aside'
          'content'
          'main'
          'footer'
      }
  }
  

我的github地址：https://gitee.com/weblfg