css网格布局之grid

1. 简介：css网格布局用于将页面分割成数个不主要内容块（子元素），或者用力啊定义组件内部元素间的大小，位置和图层之间的关系。

   想表格一样，网格布局让我们能够按行或按列拉力对齐元素，但是，使用css网格鄙css表格更灵活，布局更随心所欲。

2. 绘制网格（如三栏布局）

   

   父级元素定义

   display

   属性

   grid

   或者

   inline-grid

   grid-template-rows * grid-template-columns

   划分的度量单位接受：

   具体值（200px）:

   grid-template-columns: 290px 290px 290px

   ;

   百分比（20%）：

   grid-template-columns： 20% 20% 20%

   ；

   计算值（1fr）:

   grid-template-columns: 1fr 1fr 1fr

   ;

   repeat:

   gird-template-columns: repeat(3, 290px)

   ;

   给定范围自适应：

   grid-template-columns: repeat(3, minmax(290px, 1fr)

   );

添加项目间的间隙：

grid-gap: 10px 12px;

单个grid项目合并单元格功能

横向合并：

grid-column

纵向合并：

grid-row

html部分

<div class="wrapper"> 
  <div class="box a">A</div>
  <div class="box b">B</div> 
  <div class="box c">C</div> 
  <div class="box d">D</div> 
  <div class="box e">E</div> 
  <div class="box f">F</div> 
  <div class="box g">G</div> 
  <div class="box h">H</div> 
  <div class="box i">I</div> 
  <div class="box j">J</div> 
</div>
           

css部分

.wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(100px, 1fr));
  grid-gap:30px;
}
.box{
  background: green;
  height:100px;
}
.a {
  grid-column: 1/6;
}
           

定义结果

网格布局详细讲解见： https://www.w3cplus.com/css3/line-base-placement-layout.html