Grid布局常用属性总结

基本布局

  <div class="box">
   <div class="list">1</div>
   <div class="list">2</div>
   <div class="list">3</div>
   <div class="list">4</div>
   <div class="list">5</div>
   <div class="list">6</div>
   <div class="list">7</div>
   <div class="list">8</div>
   <div class="list">9</div>
   <div class="list">0</div>
  </div>

容器属性

【1】grid-template-columns属性（定义列）

【1】grid-template-rows属性（定义行）

    grid-template-columns: repeat(5,100px);
    grid-template-rows:repeat(3,100px);

【2】grid-auto-flow属性（项目排序顺序）

    grid-auto-flow: column;/* 先列后行 */

示例1

   .box{
    display: grid;
    background-color: gray;
    grid-template-columns: repeat(5,100px);
    grid-template-rows:repeat(3,100px);
    grid-auto-flow: column;/* 先列后行 */
    color: aliceblue;
   }

示例2

   .box{
    display: grid; 
    height: 100%;
    grid-template-columns: 100px auto 100px;
    grid-template-rows:2fr 1fr 1fr;
    grid-auto-flow: row;/* 默认 */
    color: aliceblue;
   }

【3】grid-row-gap属性（行间距）

【3】grid-column-gap属性（列间距）

    grid-row-gap: 5px;
    grid-column-gap: 5px;

【3】 grid-gap属性

    grid-gap: 5px 10px;

【4】grid-template-areas 属性

grid-template-areas: 'a b c'
          'd e g'
          'h j g';

容器中定义项目的水平/垂直位置

【5】justify-items 属性（水平方向）

justify-items: center;

【5】align-items 属性（垂直方向）

    align-items: center;

【5】place-items 属性（水平与 垂直方向）

place-items: center;

示例

   .box{
    display: grid; 
    height: 100%;
    grid-template-columns: 100px auto 100px;
    grid-template-rows:2fr 1fr 1fr;
    grid-auto-flow: row;/* 默认 */
    grid-gap: 5px 10px;
    color: black;
    font-size: 15px;
    /* justify-items: center;
    align-items: center; */
    place-items: center;
   }

容器中定义整体项目的水平/垂直位置

【6】justify-content属性

  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

【6】 align-content属性

  align-content: start | end | center | stretch | space-around | space-between | space-evenly; 

【6】place-content属性

place-content: <align-content> <justify-content>

示例

   .box{
    display: grid; 
    height: 100%;
    grid-template-columns: 80px auto 80px;
    grid-template-rows:2fr 1fr 1fr;
    grid-auto-flow: row;/* 默认 */
    /* grid-gap: 5px 10px; */
    color: black;
    font-size: 15px;
    /* justify-content: start; */
    /* justify-content: center; */
    justify-content: end;
   }

示例

   .box{
    display: grid; 
    height: 100%;
    grid-template-columns: 80px auto 80px;
    grid-template-rows:80px auto 100px;
    grid-auto-flow: row;/* 默认 */
    /* grid-gap: 5px 10px; */
    color: black;
    font-size: 15px;
    /* align-content: start;
    align-content: center; */
    align-content: end;
   }

示例

   .box{
    display: grid; 
    height: 100%;
    grid-template-columns: 80px auto 80px;
    grid-template-rows:80px auto 100px;
    grid-auto-flow: row;/* 默认 */
    /* grid-gap: 5px 10px; */
    color: black;
    font-size: 15px;
    place-content:center center;
   }

项目属性

【1】grid-column-start属性（列开始网格线）

【1】grid-column-end属性（列结束网格线）

【1】grid-row-start 属性（行开始网格线）

【1】grid-row-end 属性（行结束网格线）

   .list:nth-child(1){
    background-color: red;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
   }

【2】grid-column 属性(列网格线）

   .list:nth-child(1){
    background-color: red;
   /*  grid-column-start: 1;
    grid-column-end: 4; */
    grid-column: 1/4;
   }

【2】grid-row 属性（行网格线）

   .list:nth-child(3){
    background-color: aqua;
    grid-row: 2/4;
   }

单个项目的位置

【3】justify-self 属性(水平位置)

.item{
    justify-self:start|end|center|stretch;
}

【3】align-self 属性（垂直位置）

.item{
    aligin-self:start|end|center|stretch;
}

【3】place-self 属性（垂直水平位置）

.item{
    place-self: <aligin-self><justify-self>;
}

示例

   .box{
    display: grid; 
    height: 100%;
    grid-template-columns: 80px auto 80px;
    grid-template-rows:80px auto 100px;
    grid-auto-flow: row;/* 默认 */
    grid-gap: 5px 10px;
    color: black;
    font-size: 15px;
   }

   .list:nth-child(3){
    background-color: aqua;
    grid-row: 2/4;
    place-self: center;
   }

【4】grid-area属性

   .box{
    display: grid; 
    height: 100%;
    grid-template-columns: 80px auto 80px;
    grid-template-rows:80px auto 100px;
    grid-auto-flow: row;/* 默认 */
    grid-gap: 5px 10px;
    color: black;
    font-size: 15px;
    grid-template-areas: 'a b c'
          'd e g'
          'h j g';
   }

   .list:nth-child(1){
    background-color: red;
    grid-area:g;
   }