当前位置:   article > 正文

前端布局之网格gird布局(简单易懂)_前端 循环网格

前端 循环网格

grid网格布局

前言

弹性布局的文章很多,但是它是解决一维布局的,面对二维就显得无力了,此时我们就需要用到网格布局。(ps:一维就是一列或者一行的布局,当你遇到九宫盒布局,此时涉及到列与行,便是二维布局了,常见于电商网站的商品展示);看这篇文章,建议你自己建个html,跟着敲一敲,更利于理解。

为什么用网格布局?

很多同学可能会觉得,我用浮动,定位,弹性盒模型可以实现绝大多数样式布局呀,为什么还要新学一个网格布局呢。就像你以前用jquery,为什么后来用mvvm框架呢,因为它能让我们实现起来更效率,也很利于维护。

进入主题:

最基本代码:(体验 gird 的第一个好处,align-items:center垂直居中,妈妈再也不要担心我搞不定垂直居中了。)

<style>
  .box {
    width: 300px;
    display: grid;
    align-items:center;
  }
  .box>div{
    background: gray;
    text-align: center;
    font-size: 24px;
    border: 2px solid white;
  }
</style>

<div class="box">      
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>    
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

效果图

一、Columns(列) 和 rows(行)

1)更改上面的.box里面样式:(3列和2行)

.box {
    width: 300px;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

效果图

解说:

  • grid-template-columns是建立列。如上图,行的宽度是100px,我们写了3个100px,就是3列;是不是挺简单。
  • grid-template-rows是建立行。如上图,行的高度是50px,我们写了2个50px,就是2行。

2)我们用fr属性,依旧只改.box属。

.box {
    width: 300px;
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
    /*grid-template-columns: repeat(3, 1fr) 50px; 隐藏方法repeat,代表循环创建*/
    /*grid-template-columns: repeat(3, 1fr) 50px; 隐藏方法minmax(100px, auto),第一个参数是最小值,第二个参数是最大值*/
    grid-template-rows: 1fr 2fr;
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

效果图

看懂没,fr表示平均分配的比例,你可以打开控制台看下,columns的1,2,3元素分别是50px,100px,150px;rows也是分成1份和2份,但是它还会自动垂直居中,所以上下两端有留白。

3)来点有难度的,(在 grid(网格) 上放置 items(子元素))
重写一下dom和css,避免混乱。

<style>
  .box {
    width: 300px;
    display: grid;
    align-items:center;
    /* justify-items: center;*/
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
  }
  .box>div{
    padding: 30px 0;
    background: gray;
    text-align: center;
    font-size: 24px;
    border: 2px solid white;
  }
</style>

<div class="box">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

效果图
得到一个九宫盒,填满6个方块,另外三个空着。

先解释一个疑惑:我为什么用padding,还用text-align: center,我们注释掉的justify-items: center也能实现水平居中。原因就是gird的居中不是针对文字的,而是你这个div,没有padding值,背景图无法撑满,自己试试就明白了。


二、grid-column-start和 grid-column-end

  • 说重点:我们给Item1一个样式:
.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}
  • 1
  • 2
  • 3
  • 4

效果图
是不是有点懵,啥情况,听我娓娓道来,你会觉得原来如此。九宫盒的 grid-column是从1-9,grid-column-start表示我开始的地方是第1个盒子,grid-column-end表示我结束地方是第4个盒子(其实是第4个盒子之前结束),所以其实是1-3是item1占领的,后面的自动往后顺延。自己试试改一改属性就明白了。


三、grid-gap

只改.box样式

.box {
    width: 300px;
    display: grid;
    align-items:center;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

不贴图了, 你会发现,网格项之间添加一个间隙。有多好用,之前加空隙,用margin你会特无语,很难处理,这个就so easy。grid-column-gap和grid-row-gap分别改变列与行网格间隙。


四、实战(实现如下图的效果:传说中的十二栅格系统)

效果图
只改.box样式

<style>
  .box {
    display: grid; 
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-gap: 5px;
    grid-template-areas:
        "h h h h h h h h h h h h"
        "m m c c c c c c c c c c"
        "f f f f f f f f f f f f";
  }
  .header {
    grid-area: h;
    background: greenyellow;
  }
  .menu {
    grid-area: m;
    background: blue;
  }
  .content {
    grid-area: c;
    background: coral;
  }
  .footer {
    grid-area: f;
    background: purple;
  }
  .box>div{
    font-size: 24px;
    text-align: center;
  }
</style>

 <div class="box">      
     <div class="header">header</div>
     <div class="menu">menu</div>
     <div class="content">content</div>
     <div class="footer">footer</div>   
 </div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

这里唯一新属性就是grid-template-areas,咋一看,有点晕。仔细说来:

  • 1、grid-template-columns: repeat(12, 1fr);先在列上面制作12栅格系统。
  • 2、grid-template-rows: 50px 350px 50px;再制作三行,高度不同。形成3*12 = 36个单元格。
  • 3、 grid-template-areas将这36个单元格平分,就是打标。h代表header、m代表menu、c代表content、f代表footer。看上述写的正好平分了36份,然后我们在子样式grid-area对应找到属于自己的标签。其实还是不难理解的。

延伸:我们配合响应式多媒体查询@media screen能实现各种之前很难实现的效果。gird真正做到了结构和表现分离,是css时代的一大进步。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/295502
推荐阅读
相关标签
  

闽ICP备14008679号