grid布局

一、什么是grid布局

首先我们常用的Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局，Grid布局远比 Flex布局强大。

就像一个格子一个格子的排列，更加灵活，更加强大

二、常用的三种布局方式

1、传统布局方式

利用position属性 + display属性 + float属性布局, 兼容性最好, 但是效率低, 麻烦!

2、flex布局

有自己的一套属性, 效率高, 学习成本低, 兼容性强!

3、grid布局 dispaly:grid;

网格布局(grid)是最强大的布局方案, 但是知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局!

三、基本概念

1.容器---container

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

上面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。

2.行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

3.单元格

行和列的交叉区域，称为"单元格"（cell）。

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

4、网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

四、容器属性

1、display属性

display: grid指定一个容器采用网格布局。

div {
  display: grid;
}

2. grid-template-columns 属性， grid-template-rows 属性

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

 ul {
      /* 设置布局方式为网格布局 */
       display: grid;
       /* 指定该布局为2行5列，每个小盒子的长为290px、宽为230px */
       grid-template-columns: repeat(5, 230px);
       grid-template-rows: repeat(2, 290px);
    }

auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

3. grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

.container {
  grid-row-gap: 20px;//用于设置行间距
  grid-column-gap: 20px;//用于设置列间距
}

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式

.container {
  grid-gap: 20px 20px; //如果`grid-gap`省略了第二个值，浏览器认为第二个值等于第一个值。
}

4、 justify-items 属性， align-items 属性， place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

.container {
  //start(对齐单元格的起始边缘) end(对齐单元格的结束边缘) center(单元格内部居中) stretch(拉伸，占满单元格的整个宽度（默认值）)
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

5、 justify-content 属性， align-content 属性， place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

最后来两个小案例吧

第一个

<template>
    <div class="main">
        <div v-for="(v, i) in list" :key="i">{{ v }}</div>
    </div>
</template>

<script>
export default {
    props: {

    }
    data() {
        return {
            list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
        };
    }
};
</script>

<style scoped lang="less">

.main {
    background: pink;
    width: 1000px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 120px;
    grid-auto-flow: row;
    grid-auto-rows: 120px;
    grid-gap: 10px 10px; // 行 列

    div {
        background: red;
        box-sizing: border-box;
    }
}
</style>

效果图

第二个

<template>
    <div class="my">
        <div class="main-a">1</div>
        <div class="main-b">2</div>
        <div class="main-c">3</div>
        <div class="main-d">4</div>
        <div class="main-e">5</div>
    </div>
</template>
<style scoped lang="less">
.my {
    background: pink;
    display: grid;
    width: 1000px;
    height: 600px;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(3, auto);
    grid-template-areas:
        'a1  a1 a2'
        'a1  a1 a4'
        'a3  a5 a4'
    ;
    grid-gap: 10px;

    div {
        box-sizing: border-box;
        background: red;
        border: 2px solid black;

    }

    .main-a {
        grid-area: a1;
    }

    .main-b {
        grid-area: a2;
    }

    .main-c {
        grid-area: a3;
    }

    .main-d {
        grid-area: a4;
    }

    .main-e {
        grid-area: a5;
    }
}
</style>

效果图