Grid 布局基础常见场景

• SomeTips

  • CSS Grid Layout
  • 二维布局方案
  • 容器:最外层
  • 项目:只能是容器的顶层子元素
  • Grid 布局只对项目生效
  • 目前兼容性只有：IE10以上; chrome57以上

• 经典案例

  • 场景：单元格的栅格矩阵,栅格布局比较合适

      <div class="main">
      	<div class="item">1</div>
      	<div class="item">2</div>
      	<div class="item">3</div>
      	<div class="item">4</div>
      	<div class="item">5</div>
      </div>
    ****************
      .main{
  		display: grid;
  		grid-template-columns:100px 200px 200px;
  		grid-template-rows:100px 200px;
  		grid-gap:10px;
  	}
      或者
      .main{
  		display: grid;
  		grid-template-columns:repeat(2,100px);
  		grid-template-rows:repeat(3,100px);
  		grid-gap:10px;
  	}
      或者
      .main{
  		display: grid;
  		grid-template-columns:repeat(auto-fit,200px);
  		grid-template-rows:repeat(3,100px);
  		grid-gap:10px;
  	}
  	或者
      .main{
  		display: grid;
  		grid-template-columns:repeat(auto-fit,200px);
  		grid-auto-rows:100px; //行自适应
  		grid-gap:10px;
  	}
  	或者
      .main{
  		display: grid;
  		grid-template-rows:repeat(auto-fit,200px);
  		grid-auto-columns:100px; //列自适应
  		grid-gap:10px;
  	}
      或者
      .main{
  		display: grid;
  		grid-template-columns:1fr 2fr;
  		grid-template-rows:1fr 1fr 2fr;
  		grid-gap:10px;
  	}