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

头像
Jerry
    阅读 5 分钟
    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

    html5csshtmllesssass
    Jerry
    481 声望203 粉丝

    学习的付出 从不欺人。记忆总是苦，写总结最牢固

    « 上一篇
    【关于Javascript】--- 正则表达式篇
    下一篇 »
    【操作】sublime正则搜索替换修改数据

    引用和评论

    推荐阅读
    头像
    【踩坑笔记】项目出现Permission denied

    Jerry阅读 510

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.5k评论 3

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.6k

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    开发插件集合

    寒青赞 12阅读 3k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 2.3k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.2k评论 2

    0 条评论
    得票最新