gird布局(网格布局)

1、什么是Grid布局

​  Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。

我们通过在元素上声明display:grid或者display:inline-grid来创建一个网格容器，这个元素的所有直系子元素将成为网格项目。

grid-template-columns和grid-template-rows属性来定义网格中的行和列

例1

<template>
  <div class="gird">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
    <div class="item4">item4</div>
    <div class="item5">item5</div>
    <div class="item6">item6</div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.gird {
  display: grid;
  // 3列，每列100px  repeat(3, calc()// 此处也可以通过计算获取)
  grid-template-columns: repeat(3, 100px);
  // 每行100px
  grid-template-rows: 100px 100px;
  height: 300px;
  width: 300px;
  border: 1px solid #e4e4e4;

  .item1 {
    background-color: lightblue;
  }

  .item2 {
    background-color: lightcoral;
  }

  .item3 {
    background-color: lightcyan;
  }

  .item4 {
    background-color: lightgoldenrodyellow;
  }

  .item5 {
    background-color: lightgray;
  }

  .item6 {
    background-color: lightgreen;
  }
}
</style>

例1效果图

例2

<template>
  <div class="gird">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
    <div class="item4">item4</div>
    <div class="item5">item5</div>
    <div class="item6">item6</div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.gird {
  display: grid;
  // 3列，每列100px  repeat(3, calc()// 此处也可以通过计算获取)
  grid-template-columns: repeat(3, 100px);
  // 每行100px
  grid-template-rows: 100px 100px;
  // 行列间距
  //   grid-gap: 0;
  height: 300px;
  width: 300px;
  border: 1px solid #e4e4e4;

  .item1 {
    // 开始的基线 column垂直上分割的基线
    grid-column-start: 1;
    // 结束的基线
    grid-column-end: 3;
    background-color: lightblue;
  }

  .item2 {
    // 相当于给了个定位在3-4基线这个格子
    grid-column-start: 3;
    // 开始的基线 row水平分割的基线
    grid-row-start: 1;
    // 结束的基线
    grid-row-end: 3;
    background-color: lightcoral;
  }

  .item3 {
    background-color: lightcyan;
  }

  .item4 {
    background-color: lightgoldenrodyellow;
  }

  .item5 {
    background-color: lightgray;
  }

  .item6 {
    grid-column-start: 4;
    grid-column-end: 2;
    background-color: lightgreen;
  }
}
</style>

例2效果图