最近逛论坛的时候,无意中发现了Grid布局,一开始对这个名字还是很陌生的,但是当自己接触了之后才发现原来自己早就用过了.
Grid布局其实就是栅格布局,用过bootstrap的同学对于栅格布局肯定不陌生.个人感觉,Grid布局相比较Flex布局来说各有长短,不过个人更倾向于Grid
下面,就分享一下个人的Grid学习体会
要使用Grid布局,首先需要一个父盒子我一般给他起的名为wrapper,其下的子元素,我们起名为items.
1 <div class="wrapper"> 2 <div class="items">1</div> 3 <div class="items">2</div> 4 <div class="items">3</div> 5 <div class="items">4</div> 6 <div class="items">5</div> 7 <div class="items">6</div> 8 <div class="items">7</div> 9 <div class="items">8</div> 10 <div class="items">9</div> 11 </div>
我们需要给父盒子的display属性设置为grid,之后,我们就需要给这个父盒子wrapper设置每一行每一列的宽高了
1 .wrapper { 2 display: grid; 3 grid-template-rows: 100px 80px 50px; 4 grid-template-columns: 100px 80px 50px; 5 grid-column-gap: 10px; 6 grid-row-gap: 20px; 7 } 8 .items { 9 border: 1px solid #ccc; 10 }
具体效果如下:
父盒子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>
1 .wrapper3 { 3 display: grid; 4 grid-template-columns: 100px 100px 100px; 5 grid-template-rows: 100px 100px 100px; 6 grid-template-areas: 7 "header header header" 8 "main . slider" 9 "footer footer footer"; 10 } 11 .items3 { 12 border: 1px solid #ccc; 13 } 14 .wrapper3 .a { 15 text-align: center; 16 grid-area: header; 17 } 18 .wrapper3 .b { 19 grid-area: main; 20 text-align: center; 21 } 22 .wrapper3 .c { 23 text-align: center; 24 grid-area: slider; 25 } 26 .wrapper3 .d { 27 grid-area: footer; 28 text-align: center; 29 }
在上图中,我把整个wripper分成了五部分, 我们可以发现利用这种方式来合并区域不需要在HTML代码中删减标签,而是把需要划分到同同一区域的标签表上同一区域名就可以了, 在父盒子wrapper中,我们通过grid-temlpate-areas规定了五个区域,将第一行的三个栅格规定为header区域,将第二行的第一个栅格规定为main区域,将第二个栅格规定为空区域, (注意,这里的 "."就是空区域的意思),将第三个栅格规定为slider区域, 将第三行的三个栅格规定为footer区域, 下面要做的就是在子元素items中,将他们附上各自对应的区域名就可以了,例如,我将第一行的三个栅格都增加了gird-area属性,属性值为header,name这三个栅格便合并在一起了,要注意的是,对于同一区域内的多个标签, 其实只是重叠到了一起,他们之间是有层叠关系的, 比如, 同时给第一个和第二个标签添加了背景颜色,那么 最后显示的背景色是第二个栅格设置的背景色.