柵格GRID: 將來可期更便捷的佈局方式

時間 2019-12-05

標籤柵格 grid 將來便捷佈局方式简体版

原文原文鏈接

柵格佈局組成：

wrapper（父元素）和 items（子元素）。css

屬性設置：

父可設置屬性:html

display: grid;或display: inline-grid;  /*網格模式*/

grid-template-columns: 40px auto 50px;  
/*子元素列的寬度*/
grid-template-rows: 25% 100px auto; 
/*子元素行的高度 設置則定高 不設則自適應*/
/*它們倆可設置是px 百分比 也能夠自動伸縮auto等*/

grid-gap: 5px; 
/*網格區域的間距 可設置單一間距 也能夠上下一個間距左右一個間距 。 
不支持上右下左四個值寫法*/

子可設置屬性:
不設置一下值是默認均分。更多變化須要用到⤵️app

grid-row-start: 2;    /*行 的開始*/
grid-row-end: 3;      /*行 的結束*/

/*上面兩句可簡寫成 grid-row: 2 / 3;*/


grid-column-start: 1; /*列 的開始*/
grid-column-end: 4;   /*列 的結束*/

/*同理上面兩句可簡寫成 grid-column: 1 / 4;*/

------------更簡潔寫法-----------------------佈局

grid-row-start: 2;    /*行 的開始*/
grid-row-end: 3;      /*行 的結束*/
grid-column-start: 1; /*列 的開始*/
grid-column-end: 4;   /*列 的結束*/

/*上面四句可簡寫成*/
grid-area:2/1/3/4;   
/*順序grid-row-start，grid-column-start，grid-row-end，grid-column-end。*/

理解row和columns的排序基本就理解grid的用法
例如：
grid-row-start: 2；指的是從上到下第二條線開始
grid-column-start: 1; 指的是從左到右第一條線開始flex

DEMO圖示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="full-screen">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="format-detection" content="telephone=no" />
<title>Grid</title>
<style type="text/css">
    .parentBox {
        display: grid;
        grid-gap: 5px; /*網格區域的間距 可設置單一個間距 也能夠上下一個間距左右一個間距 。 不支持上右下左四個值寫法*/
        margin-bottom: 30px;
    }
    .parentBox div{
        color: #fff;
        border: 2px solid #607D8B; 
        justify-content: center;
        align-items: center;
        display: flex;
    }
    /*-------------------------*/
    .wrapper {
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 50px 50px;
    }
    /*-------------------------*/
    .wrapper1 {
        grid-template-columns: 30% auto 30px;  /*子元素列的寬度 */
        grid-template-rows: 50px 50px; /*子元素行的高度 設置了則定高度 本身適應*/
        
    }
    /*-------------------------*/
    .wrapper2 {
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        margin-bottom: 30px;
    }
    .wrapper2 .item_1{
        grid-column-start: 1; 
        grid-column-end: 4;
    }
    .wrapper2 .item_4{
        grid-row-start: 2;
        grid-row-end: 4;
        grid-column-start: 3;
        grid-column-end: 4;
    }

    /*-------------------------*/
    .wrapper3{
        grid-template-columns: 100px 100px 100px;  /*子元素列的寬度*/
        grid-template-rows: 50px 50px; /*子元素行的高度 設置了則定高度 本身適應*/
    }

    .wrapper3 .item_1{
        grid-area: 1 / 4 / 1 / 1;
        /*grid-area是grid-row和grid-column的簡寫。順序是grid-row-start，grid-column-start，grid-row-end，grid-column-end。*/
    }
    .wrapper3 .item_4{
        grid-area: 2/3/4/4;
        /*grid-area是grid-row和grid-column的簡寫。順序是grid-row-start，grid-column-start，grid-row-end，grid-column-end。*/
        /*row 開始 /column 開始/ row 結束 /column 結束*/
    }

</style>
</head>

<body>
    <p>均分</p>
    <div class="parentBox wrapper">
      <div class="item_1" style="background-color: #FF5722">1</div>
      <div class="item_2" style="background-color: #ff9800">2</div>
      <div class="item_3" style="background-color: #FFC107">3</div>
      <div class="item_4" style="background-color: #CDDC39">4</div>
      <div class="item_5" style="background-color: #8BC34A">5</div>
      <div class="item_6" style="background-color: #4CAF50">6</div>
    </div>

    <p>x:30% auto 30px</p>
    <div class="parentBox wrapper1">
      <div class="item_1" style="background-color: #FF5722">1</div>
      <div class="item_2" style="background-color: #ff9800">2</div>
      <div class="item_3" style="background-color: #FFC107">3</div>
      <div class="item_4" style="background-color: #CDDC39">4</div>
      <div class="item_5" style="background-color: #8BC34A">5</div>
      <div class="item_6" style="background-color: #4CAF50">6</div>
    </div>

    <p>grid-row grid-column</p>
    <div class="parentBox wrapper2">
      <div class="item_1" style="background-color: #FF5722">1</div>
      <div class="item_2" style="background-color: #ff9800">2</div>
      <div class="item_3" style="background-color: #FFC107">3</div>
      <div class="item_4" style="background-color: #CDDC39">4</div>
      <div class="item_5" style="background-color: #8BC34A">5</div>
      <div class="item_6" style="background-color: #4CAF50">6</div>
    </div>

    <p>更簡約寫法grid-area</p>
    <div class="parentBox wrapper3">
      <div class="item_1" style="background-color: #FF5722">1</div>
      <div class="item_2" style="background-color: #ff9800">2</div>
      <div class="item_3" style="background-color: #FFC107">3</div>
      <div class="item_4" style="background-color: #CDDC39">4</div>
      <div class="item_5" style="background-color: #8BC34A">速度快聖誕節看電視劇聖</div>
      <div class="item_6" style="background-color: #4CAF50">速度快聖誕節看電視劇聖誕節看電視劇考慮到</div>
    </div>
</body>
</html>

mark一下僅供參考歡迎更正補充 endspa