栅格布局

栅格布局

 

栅格布局可以不用完全规定子元素的长宽,但子元素可以按照想要的比例进行响应式的排版,对于前端的排版可以说是省略了很多时间的布局格式

 

栅格化布局

需要给父级盒子用才可以

display: grid;

 

占比分布

• 通过在父组件中定义 子组件在父组件中的占比

• columns :行 rows:列 ,单位为 fr

grid-template-columns:   1fr 2fr 1fr;
grid-template-rows:      80px 1fr 1fr;

可以看到此时我们希望的是一行分成三个元素,且分三列进行排布,且可以不使用 fr 而是确切的单位来进行规定宽高

 

子元素之间的边距

• 子元素们的外边距

• gap:左右的间距 row:上下的间距

gap: 20px;
row-gap:40px

 

命名子元素进行排版

当我们需要更加高精度的分割每个元素的所在比例的时候,就可以使用 子组件命名

 

1.先需要给子元素盒子进行命名

• grid-area:给当前盒子一个名称,以便在父组件中进行排版

.box1 {
        grid-area: A;
    }
.box2 {
        grid-area: B;
    }
.box3 {
        grid-area: C;
    }
......

 

2.在父组件中进行排版:

• grid-template 对已经命名的子组件进行排版

• 子元素后的具体数值控制着高度

.main{
        display: grid;
        grid-template:
            "A A A A A" 80px
            "B C C C C" 1fr
            "D D D D D" 40px;
}

此时我们可以看到页面具体分为了三列,且第一列主要被 box1所命名的A所占据,所以现在box1就已经达到了width:100%

而在第二行中,B组仅仅只有五分之一的宽度,但是第二行占据了 100vh-120px 的巨大高度

 

自定义子元素开始与结束位置

当子元素进行了栅格布局排版的时候当然也是可以进行对于位置的自定义了

自定义开始行(列)与结束行(列)

• grid-column: 开始行/结束行

• grid-row: 开始列/结束列

    .box2 {
        /* 子元素中 */
        grid-column: 1/3;
        grid-row: 1/3;
    }