网格布局常用属性解析

1.网格布局采用行和列的思想进行区域划分,可以排除一切其他细节的干扰因素.

2.容器和子项

网格布局和弹性布局类似,都是采用容器和子项构成.通过为元素指display:grid或display:inline-grid可以创建一个网格容器.如下例:.parent变为网格容器

 <style>
        .parent{
            display: grid;
        }
 </style>

 <div class="parent">
    <div class="child">A</div>
    <div class="child">B</div>
    <div class="child">C</div>
    <div class="child">D</div>
    <div class="child">E</div>
 </div>

3.行与列

3.1定义行

没有设定行的情况下,所有的行都会平均分配容器,且每行默认占整宽

<style>
        .parent{
            display: grid;
            margin: 100px auto;
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }
        .child{
            border: 1px solid black;
        }
</style>

 修改每行占比,可在容器指定grid-template-rows,类型可以为百分比,也可以为px.

 如果给的数值多次重复,可以用rpeat来批量生成,效果一样的repeat(重复的次数,重复的值)

 3.2定义列

定义列我们可以使用grid-template-columns,这个属性我们一般更加常用

 除了百度比,我们还可以使用fr来表示每列所占的份数,效果和上面一样,类似弹性布局的flex-grow

3.3定义方式网格模板

对于有相对长度和绝对长度的长和列,我们可以同时使用绝对单位和相对单位.

 若想让第2列占满,使用单位fr

 

 3.4调整网格间距

间距可以在视觉上分割元素,让区域划分更加明确,默认是没有间距的.

 

 也可以简写为grid-gap

  3.5调整网格中的区域(重点)

以下面的例子来说,布局就像组合排序一样,搭建一些骨架非常方便.

  <style>
        .parent {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 5px;
            grid-template-areas: 
            'a a a'
            'b . c' /* .表示空占位 */
            'd e f'
            'g h h'
            'i i i';
            margin: 100px auto;
            width: 600px;
            height: 200px;
            border: 1px solid black;
        }

        .child {
            border: 1px solid black;
            background-color: #eee;
        }
        /* 命名 */
        #a{grid-area: a;}
        #b{grid-area: b;}
        #c{grid-area: c;}
        #d{grid-area: d;}
        #e{grid-area: e;}
        #f{grid-area: f;}
        #g{grid-area: g;}
        #h{grid-area: h;}
        #i{grid-area: i;}
    </style>

<div class="parent">
        <!-- 设置id -->
        <div class="child" id="a">A</div>
        <div class="child" id="b">B</div>
        <div class="child" id="c">C</div>
        <div class="child" id="d">D</div>
        <div class="child" id="e">E</div>
        <div class="child" id="f">F</div>
        <div class="child" id="g">G</div>
        <div class="child" id="h">H</div>
        <div class="child" id="i">I</div>
</div>