栅格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

栅格GRID: 将来可期 更便捷的布局方式

栅格布局组成：

属性设置：

DEMO图示：

栅格GRID: 将来可期更便捷的布局方式