grid布局笔记学习一之父元素（容器）

HTML代码：

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

CSS代码：（父元素容器）

 #box{
     /*width: 550px;*/
     display: grid;
     text-align: center;
     /*    grid-template-columns每一列的列宽     */
     /*    grid-template-columns:100px 100px 100px;    等价于*/
         grid-template-columns: repeat(3,100px);    

     /*    grid-template-rows每一行的行高 */
     /*    grid-template-rows:100px 100px 100px 100px;     等价于*/
         grid-template-rows: repeat(3,100px);    

     /*    auto-fill有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。*/
     /*    grid-template-columns: repeat(auto-fill, 100px);    */
     /*    grid-template-rows: repeat(auto-fill, 100px);    */

     /*    fr表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。*/
     /*    grid-template-columns: 1fr 1fr;    */
     /*    grid-template-columns: 150px 1fr 2fr;*/
     /*    grid-template-columns: repeat(auto-fill, 1fr);*/

     /*    minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。    */
         /*    grid-template-columns: 1fr 1fr minmax(100px, 1fr);列宽不小于100px，不大于1fr*/

     /*    auto关键字表示由浏览器自己决定长度。*/
         /*grid-template-columns: 100px auto 100px;*/

     /*    网格线的名称
      *     grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用*/
         /*grid-template-columns: [c1] 100px [c2] 100px [c3] auto [fifth-line row-5];    网格布局允许同一根线有多个名字，比如[fifth-line row-5]*/
         /*grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];*/

     /*    grid-row-gap，属性设置行与行的间隔（行间距）
         grid-column-gap，列与列的间隔（列间距）
         grid-gap，    grid-gap: <grid-row-gap> <grid-column-gap>;
     */
         /*    grid-row-gap: 20px;
             grid-column-gap: 20px;
             grid-gap: 20px 20px; =>等价  grid-gap: 20px;
         */

     /*    grid-template-areas网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。*/
         /*    grid-template-columns: 100px 100px 100px;
             grid-template-rows: 100px 100px 100px;
         */

         /*    划分出9个单元格，将其定名为a到i的九个区域，分别对应这九个单元格
             grid-template-areas: 'a b c'
                                  'd e f'
                                  'g h i';
         */
         /*    将9个单元格分成a、b、c三个区域
             grid-template-areas: 'a a a'
                                   'b b b'
                                   'c c c';
         */
         /*    中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域
             grid-template-areas: 'a . c'
                                   'd . f'
                                   'g . i';
         */
         /*    示例
             grid-template-areas: "header header header"
                                   "main main sidebar"
                                   "footer footer footer";
         */

        /*    grid-auto-flow 放置顺序默认从行后列,从上而下    */
         /*    grid-auto-flow: row;    默认
             grid-auto-flow: row dense;
                grid-auto-flow: column;
            */

        /*
         *  justify-items单元格内容的水平位置（左中右）: start | end | center | stretch(拉伸，占满单元格的整个宽度（默认值)，
         align-items属性设置单元格内容的垂直位置（上中下）: 同上，
         place-items: <align-items> <justify-items>; 可简写
     */
            /*    justify-items: stretch;
                align-items: stretch;
                place-items: center;
            */

        /*    justify-content 整个内容区域在容器里面的水平位置: start | end | center | stretch | space-around | space-between | space-evenly，
         align-content 整个内容区域的垂直位置（上中下）: 同上，
         place-content: <justify-content> <align-content>
     */
         /*    justify-content: space-evenly ;
             place-content:space-between space-evenly;
         */

     /*    grid-auto-columns和grid-auto-rows设置浏览器自动创建的多余网格的列宽和行高    */
         /*
             grid-auto-rows: 50px;
             grid-auto-columns: 50px;
         */

     /*
      *     grid-template 属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式，
         grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式
     */

 }
 /*.box1{
     grid-row-start: 4;
     grid-column-start: 2;
 }
 .box2{
     grid-row-start: 5;
     grid-column-start: 3;
 }*/
 /*.box3{
     grid-row-start: 1;
     grid-row-end: 3;
 }*/