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

7

栅格布局组成:

wrapper(父元素)和 items(子元素)。

属性设置:

父 可设置属性:

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

grid-template-columns: 40px auto 50px;  
/*子元素列的宽度*/
grid-template-rows: 25% 100px auto; 
/*子元素行的高度 设置则定高 不设则自适应*/
/*它们俩可设置是px 百分比 也可以自动伸缩auto等*/

grid-gap: 5px; 
/*网格区域的间距 可设置单一间距 也可以上下一个间距左右一个间距 。 
不支持上右下左四个值写法*/

子 可设置属性:
不设置一下值是 默认均分。 更多变化 需要用到⤵️

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。*/  

clipboard.png

理解row和columns的排序 基本就理解grid的用法
例如:
grid-row-start: 2; 指的是从上到下第二条线开始
grid-column-start: 1; 指的是从左到右第一条线开始


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>

clipboard.png

clipboard.png

mark一下 仅供参考 欢迎更正补充 end


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...