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