Grid布局学习整理

最近逛论坛的时候,无意中发现了Grid布局,一开始对这个名字还是很陌生的,但是当自己接触了之后才发现原来自己早就用过了.

Grid布局其实就是栅格布局,用过bootstrap的同学对于栅格布局肯定不陌生.个人感觉,Grid布局相比较Flex布局来说各有长短,不过个人更倾向于Grid

下面,就分享一下个人的Grid学习体会

要使用Grid布局,首先需要一个父盒子我一般给他起的名为wrapper,其下的子元素,我们起名为items.

<div class="wrapper">
    <div class="items">1</div>
    <div class="items">2</div>
    <div class="items">3</div>
    <div class="items">4</div>
    <div class="items">5</div>
    <div class="items">6</div>
    <div class="items">7</div>
    <div class="items">8</div>
    <div class="items">9</div>
</div>

 

我们需要给父盒子的display属性设置为grid,之后,我们就需要给这个父盒子wrapper设置每一行每一列的宽高了

.wrapper {
    display: grid;
    grid-template-rows: 100px 80px 50px;
    grid-template-columns: 100px 80px 50px;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
}
.items {
    border: 1px solid #ccc;
}

具体效果如下:

父盒子wrapper中的grid-template-rows属性,是给每一行设置各自的行高,后面我写了3个值,分别是100px,80px,50px,那么对应的就是第一行的行高是100px,第二行的行高是80px,第三行的行高是50px.同理,父盒子wrapper中的grid-template-columns属性,是给每一列设置各自的列宽,后面我也写了3个值,分别是100px,80px,50px,那么对应的就是第一列的列宽是100px,第二列的列宽是80px,第三列的列宽是50px.这两个属性可以说是grid布局最核心的属性,后面的grid-column-gap是用来设置每一列之间的列间距,这里我设置的是10,也就是说每一列的间距为10px,grid-row-gap同理就是设置每一行的行间距.

 

接下来,如果想让一个格子占据多行或者多列该怎么做呢,首先,我们先把HTML代码放出来

<div class="wrapper2">
    <div class="items2 a">1</div>
    <div class="items2 b">2</div>
    <div class="items2 c">3</div>
    <div class="items2 d">4</div>
    <div class="items2 e">5</div>
    <div class="items2 f">6</div>
</div>

.wrapper2 {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
}
.items2 {
    border: 1px solid #ccc;
}
.wrapper2 .a {
    grid-column-start: 1;
    grid-column-end: 4;
}
.wrapper2 .b {
    grid-row-start: 2;
    grid-row-end: 4;
}

代码执行结果如下:

我们看到第一行的元素,也就是类名为 items a 的元素独占一行, 这是因为我们设置了grid-column-start和grid-column-end这两个属性, grid-column-start设置为1, 就说明该栅格块的起始位置为第一条网格线, 也就是最左侧边界的那一条线,grid-column-end的属性设置为4, 也就说明该栅格块的结束位置是第四条网格线, 也就是最右侧边界的那条线, 这里要注意,我们看到了每行有三个栅格, 但其实网格线其实是有四条, 最左, 最右, 以及中间两条共4条. 同理,我们看到标号为2的栅格块横跨两行,这是因为我们设置的grid-row-start为2, 起始位置为第二条网格线,gird-row-end为4, 结束位置为第四条网格线

 

上述的方式,可以理解为合并栅格,但是,合并栅格还有另外一种方式, 就是划分区域 ,首先我们先把HTML结构列出来:

<div class="wrapper3">
    <div class="items3 a">header</div>
    <div class="items3 a"></div>
    <div class="items3 a"></div>
    <div class="items3 b">main</div>
    <div class="items3">empty</div>
    <div class="items3 c">slider</div>
    <div class="items3 d">footer</div>
    <div class="items3 d"></div>
    <div class="items3 d"></div>
</div>

.wrapper3 {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 
        "header header header"
        "main . slider"
        "footer footer footer";
}
.items3 {
    border: 1px solid #ccc;
}
.wrapper3 .a {
    text-align: center;
    grid-area: header;
}
.wrapper3 .b {
    grid-area: main;
    text-align: center;
}
.wrapper3 .c {
    text-align: center;
    grid-area: slider;
}
.wrapper3 .d {
    grid-area: footer;
    text-align: center;
}    

在上图中,我把整个wripper分成了五部分, 我们可以发现利用这种方式来合并区域不需要在HTML代码中删减标签,而是把需要划分到同同一区域的标签表上同一区域名就可以了, 在父盒子wrapper中,我们通过grid-temlpate-areas规定了五个区域,将第一行的三个栅格规定为header区域,将第二行的第一个栅格规定为main区域,将第二个栅格规定为空区域, (注意,这里的 "."就是空区域的意思),将第三个栅格规定为slider区域, 将第三行的三个栅格规定为footer区域, 下面要做的就是在子元素items中,将他们附上各自对应的区域名就可以了,例如,我将第一行的三个栅格都增加了gird-area属性,属性值为header,name这三个栅格便合并在一起了,要注意的是,对于同一区域内的多个标签, 其实只是重叠到了一起,他们之间是有层叠关系的, 比如, 同时给第一个和第二个标签添加了背景颜色,那么 最后显示的背景色是第二个栅格设置的背景色.