css之grid布局

用户8717777357850
85 阅读3分钟

1.为什么要使用grid的布局 说到响应式布局大家想到的肯定是媒体查询但是媒体查询写起来比较复杂，有没有比媒体查询简单一点的方式去实现响应式呢，其实这里要说的grid布局也是一个方案，如果你的页面需要比较复杂的响应式效果，两个结合起来是最好的。 2.有grid布局以后就不需要弹性盒子了吗，其实不是的，在单行的场景下，用弹性盒子布局是比较方便的，当然gird也可以用，但是gird布局更适合于九宫格等多行多列的场景，尤其是像传统页面的圣杯布局，不管你用传统的float，或者是flex布局，都不如grid-template-area这个api来的直接了当下面是简单的实例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
          '葡萄 葡萄 葡萄'
          '龙虾 养鱼 养鱼'
          '龙虾 养鱼 养鱼'
          '西瓜 西瓜 西瓜';
        height: 400px;
      }
      .container item {
        outline: 1px dotted;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .putao {
        grid-area: 葡萄;
      }
      .longxia {
        grid-area: 龙虾;
      }
      .yangyu {
        grid-area: 养鱼;
      }
      .xigua {
        grid-area: 西瓜;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <item class="putao">葡萄种植区</item>
      <item class="longxia">龙虾养殖区</item>
      <item class="yangyu">鱼类养殖区</item>
      <item class="xigua">西瓜种植区</item>
    </div>
    <script></script>
  </body>
</html>

下面是运行效果图

image.png grid-template-areas: '葡萄 葡萄 葡萄' '龙虾 养鱼 养鱼' '龙虾 养鱼 养鱼' '西瓜 西瓜 西瓜'; height: 400px; } 这是什么意思呢，其实对每一个fr区域的一个占位，比如葡萄葡萄就是表示葡萄要占用三个1fr的位置， grid-area: 葡萄;这里也是遥相呼应。

grid之响应式布局

image.png 当我把屏幕宽度缩小之后，可以看到一行只有三列了，目前是一行四列

image.png 在没有grid布局之前要实现这个效果大概率是用媒体查询来实现了，但是有了grid布局只需要下面一行代码就可以实现这种效果 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-gap: 10px;
      }
      .grid-item {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        font-size: 30px;
        flex-basis: auto;
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
    </div>
  </body>
</html>

这里也有一个注意事项，父元素不再能写死了，否则效果出不来

grid布局垂直水平居中布局

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        place-items: center;
        /* height: 100vh; */
        justify-content: center;
        align-items: center;
        height: 100px;
        width: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">内容</div>
    </div>
  </body>
</html>

justify-self、align-self、place-self与justify-items、align-item、place-items，但是前者是子项上使用的api,后者是grid容器上使用的api,针对整体进行设置。

分别表示设置单元格内容的水平位置（左中右）、垂直位置（上中下），

跨行跨列一种两外实现的方法（除了上面提过的grid-template-area），直接上代码

grid-column: 1 / 3 表示自己的位置在第一列，需要跨2列，实际上他还是占用2列 grid-row:1 / 3 表示自己的位置在第一行，需要跨2列，实际上他还是占用2行

grid布局跟flex弹性布局相近的一些知识点

这里我只说一个 其它的都是相近的 grid-auto-flow 就是对应 flex-direction，前文说过，像单行布局最好使用弹性盒子，其余的属性，api和效果几乎都是一样的

avatar
文章
阅读
粉丝