grid佈局筆記學習一之父元素（容器）

HTML代碼：

 1 <div id="box">
 2     <div class="lbox box1" style="background: #F2211A;">1</div>
 3     <div class="lbox box2" style="background: #909399;">2</div>
 4     <div class="lbox box3" style="background: #F56C6C;">3</div>
 5     <div class="lbox box4" style="background: #E6A23C;">4</div>
 6     <div class="lbox box5" style="background: #67C23A;">5</div>
 7     <div class="lbox box6" style="background: #303133;">6</div>
 8     <div class="lbox box7" style="background: #DCDFE6;">7</div>
 9     <div class="lbox box8" style="background: #606266;">8</div>
10     <div class="lbox box9" style="background: #C0C4CC;">9</div>
11             <!--<div class="lbox" style="background: #D78D3D;">10</div>-->
12         </div>

CSS代碼：（父元素容器）

  1 #box{
  2     /*width: 550px;*/
  3     display: grid;
  4     text-align: center;
  5     /*    grid-template-columns每一列的列寬     */    
  6     /*    grid-template-columns:100px 100px 100px;    等價於*/    
  7         grid-template-columns: repeat(3,100px);    
  8     
  9     
 10     /*    grid-template-rows每一行的行高 */
 11     /*    grid-template-rows:100px 100px 100px 100px;     等價於*/            
 12         grid-template-rows: repeat(3,100px);    
 13     
 14     
 15     /*    auto-fill有時，單元格的大小是固定的，可是容器的大小不肯定。若是但願每一行（或每一列）容納儘量多的單元格，這時能夠使用auto-fill關鍵字表示自動填充。*/
 16     /*    grid-template-columns: repeat(auto-fill, 100px);    */
 17     /*    grid-template-rows: repeat(auto-fill, 100px);    */
 18     
 19     
 20     /*    fr表示比例關係，網格佈局提供了fr關鍵字（fraction 的縮寫，意爲"片斷"）。若是兩列的寬度分別爲1fr和2fr，就表示後者是前者的兩倍。*/    
 21     /*    grid-template-columns: 1fr 1fr;    */
 22     /*    grid-template-columns: 150px 1fr 2fr;*/
 23     /*    grid-template-columns: repeat(auto-fill, 1fr);*/
 24     
 25     
 26     /*    minmax()函數產生一個長度範圍，表示長度就在這個範圍之中。它接受兩個參數，分別爲最小值和最大值。    */
 27         /*    grid-template-columns: 1fr 1fr minmax(100px, 1fr);列寬不小於100px，不大於1fr*/
 28         
 29         
 30     /*    auto關鍵字表示由瀏覽器本身決定長度。*/
 31         /*grid-template-columns: 100px auto 100px;*/
 32         
 33             
 34     /*    網格線的名稱
 35      *     grid-template-columns屬性和grid-template-rows屬性裏面，還能夠使用方括號，指定每一根網格線的名字，方便之後的引用*/
 36         /*grid-template-columns: [c1] 100px [c2] 100px [c3] auto [fifth-line row-5];    網格佈局容許同一根線有多個名字，好比[fifth-line row-5]*/
 37         /*grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];*/
 38         
 39         
 40     /*    grid-row-gap，屬性設置行與行的間隔（行間距）
 41         grid-column-gap，列與列的間隔（列間距）
 42         grid-gap，    grid-gap: <grid-row-gap> <grid-column-gap>;
 43     */
 44         /*    grid-row-gap: 20px;
 45             grid-column-gap: 20px;    
 46             grid-gap: 20px 20px; =>等價  grid-gap: 20px;
 47         */
 48     
 49     
 50     /*    grid-template-areas網格佈局容許指定"區域"（area），一個區域由單個或多個單元格組成。*/
 51         /*    grid-template-columns: 100px 100px 100px;
 52             grid-template-rows: 100px 100px 100px;
 53         */
 54     
 55         /*    劃分出9個單元格，將其定名爲a到i的九個區域，分別對應這九個單元格
 56             grid-template-areas: 'a b c' 
 57                                  'd e f'
 58                                  'g h i';
 59         */                
 60         /*    將9個單元格分紅a、b、c三個區域
 61             grid-template-areas: 'a a a'
 62                                   'b b b'
 63                                   'c c c';
 64         */
 65         /*    中間一列爲點，表示沒有用到該單元格，或者該單元格不屬於任何區域
 66             grid-template-areas: 'a . c'
 67                                   'd . f'
 68                                   'g . i';                       
 69         */
 70         /*    示例
 71             grid-template-areas: "header header header"
 72                                   "main main sidebar"
 73                                   "footer footer footer";
 74         */
 75    
 76        
 77        /*    grid-auto-flow 放置順序默認從行後列,從上而下    */
 78         /*    grid-auto-flow: row;    默認
 79             grid-auto-flow: row dense;
 80                grid-auto-flow: column;
 81            */
 82        
 83        
 84        /*
 85         *  justify-items單元格內容的水平位置（左中右）: start | end | center | stretch(拉伸，佔滿單元格的整個寬度（默認值)，
 86         align-items屬性設置單元格內容的垂直位置（上中下）: 同上，
 87         place-items: <align-items> <justify-items>; 可簡寫
 88     */
 89            /*    justify-items: stretch;
 90                align-items: stretch;
 91                place-items: center;
 92            */
 93            
 94        
 95        /*    justify-content 整個內容區域在容器裏面的水平位置: start | end | center | stretch | space-around | space-between | space-evenly，
 96         align-content 整個內容區域的垂直位置（上中下）: 同上，
 97         place-content: <justify-content> <align-content>
 98     */
 99         /*    justify-content: space-evenly ;
100             place-content:space-between space-evenly;
101         */
102     
103     
104     /*    grid-auto-columns和grid-auto-rows設置瀏覽器自動建立的多餘網格的列寬和行高    */
105         /*
106             grid-auto-rows: 50px;
107             grid-auto-columns: 50px;
108         */
109         
110         
111     /*
112      *     grid-template 屬性是grid-template-columns、grid-template-rows和grid-template-areas這三個屬性的合併簡寫形式，
113         grid屬性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow這六個屬性的合併簡寫形式    
114     */
115         
116 }
117 /*.box1{
118     grid-row-start: 4;
119     grid-column-start: 2;
120 }
121 .box2{
122     grid-row-start: 5;
123     grid-column-start: 3;
124 }*/
125 /*.box3{
126     grid-row-start: 1;
127     grid-row-end: 3;
128 }*/