css篇 --- grid 布局下面每一个属性的含义 viewport:视口，显示设备内部，真正实际用于显示网页区域大

下面每一个属性的含义

<meta name=”viewport”content=”width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0”>

viewport:视口，显示设备内部，真正实际用于显示网页区域大小
width:视口宽；device-width 等于物理设备宽
user-scalable：是否允许用户手工缩放网页
initial-scale=1.0：加载页面时，页面的缩放比例是1，表示不缩放，原页面大小展示
maximum-scale=1.0,minimum-scale=1.0：允许用户缩放网页的最大缩放比例和最小缩放比例都是1，表示不允许用户在使用过程中，中途缩放网页 Grid 布局：则将容器划分成 “行” 和 “列”，产生单元格，然后指定项目所在的单元格可以看作二维布局 Grid 布局远比 Flex 布局强大（不过存在兼容性问题），知识点比较多，学习成本相对比较高，目前兼容性不如 flex 布局（规定共有几行，几列，每行，每列宽多少？）父元素：display:grid

容器属性 1. grid-template-rows 用来指定每行的高度
grid-template-rows指定的每个值可以创建每行的高度。行的高度可以是任何非负值，长度可以是px、%、em等长度单位的值

grid-template-rows: repeat(3,100px)

item1和item2,item3具有固定的高，分别为100px。因为只定义了三个行的高度值，所以后面未定义的元素的高度是根据其自身的内容来定义。

grid-template-rows: repeat(3,100px 200px 300px)

代表重复三次，每一次的第一列，第二列，第三列的列高分别为 100px 200px 300px

2.grid-template-columns：用来指定每列的列宽

grid-template-columns:100px 100px 100px; // 显示为前三行的列宽为 100px

grid-template-columns:repeat(3,100px);  //同上 第一个参数要分成几列 每一列的宽度是多少

前三行的每一列的列宽分别为 100px,后面列宽根据内容自适应。

repeat

1.有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。
2.接受两个参数：第一个数重复的次数，第二个是重复的值
3.repeat也可以是重复某种模式，例如下面的例子就是一只重复150px 20px 80px
4.grid-template-columns: 30px repeat(3, 1fr) 30px; 在这个示例中，第一列和最后一列的宽度都是30px，并且它们之间有另列三列，这三列是通过repeat()来创建的，而且每列的列宽是1fr（1fr = (网格宽度 - 30px - 30px) / 3）

<template>
  <div class="box">
    <div v-for="item in 19" style="background: pink"> {{ item }}</div>
  </div>
</template>

<script>
export default {
  name: 'Lianxi'
}
</script>

<style scoped lang="scss">
.box{
  display: grid;
  grid-template-columns: repeat(5,100px);
  grid-template-rows:repeat(3,50px); // repeat - 2
  grid-template-rows:repeat(3,150px 20px 80px); // repeat - 3
  /*column-gap:20px;*/
  /*row-gap:20px*/
  gap:20px
}
</style>

auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充

grid-template-columns: repeat(auto-fill,100px);

fr，为了方便表示比例关系，网格布局提供了fr关键字(fraction 的缩写，意为"片段”) fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间

场景1：想要平均分成 5 列，

grid-template-columns:repeat(5,1fr); // 宽度平均分成五等份

场景2：假设整个宽度平均宽度份为 5份，1fr,占1份，2fr,1fr的2倍

grid-template-columns:1fr 2fr 2fr;   // 列宽这样是分成5份各占 1 2 3 份 效果如下

可以与绝对长度结合一起使用

.wrapper {
        display: grid;
        grid-template-columns: 150px 1fr 2fr; 
        // 3列 第一列 150px 剩余部分平均分成3 份，第二列占1 份，第三列占2 份
      }

grid-template-columns: 3rem 25% 1fr 2fr 在这个示例中，网格容器可用空间是网格宽度减去3rem和25%剩下的宽度，而fr就是基于这个尺寸计算
1fr = (网格宽度 - 3rem - 网格宽度 * 25%) / 3 auto 表示由浏览器自己决定长度

grid-template-columns: 100px auto 100px;

3.容器属性 grid-gap / grid-column-gap 项目之前相互之间的距离

grid-column-gap =>  column-gap // 列之间的距离

grid-row-gap => row-gap // 行之间的距离

grid-gap => gap // 行列之前的距离

如果省略第二个值的话，那么就默认第二个值等于第一个值

.wrapper{
grid-gap: 10px 10px;
}

注释代码效果与gap效果一致，简写 4.grid-auto-flow
grid-auto-flow: row 排列顺序，先行后列
grid-auto-flow: row dense 排列顺序，先行后列，紧密填满
grid-auto-flow: column 排列顺序，先列后行
grid-auto-flow: column dense 排列顺序，先列后行，紧密填满 grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。读者可以把这个属性的值分别改成column、row dense和column dense 5.justify-items start | end | center | stretch; 设置单元格内容的水平位置（左右中）- stretch：拉伸，占满单元格的整个宽度（默认值）

6. align-items start | end | center | stretch; 设置单元格内容的垂直位置（上下中）

7. place-items: <align-items> <justify-items>; align-items属性和justify-items属性的合并简写形式。例：place-items: start end

10.place-content:<align-content> <justify-content> align-content属性和justify-content属性的合并简写形式。

项目属性

grid-column-start: n 指定项目元素的左边框所在的垂直网格线
grid-column-end: n 指定项目元素的右边框所在的垂直网格线
grid-row-start: n 指定项目元素的上边框所在的水平网格线
grid-row-end: n 指定项目元素的下边框所在的水平网格线
span关键字 表示”跨越“，即左右边框（上下边框）之间跨越多少个网格，例：grid-column-start: span 2;
grid-column 属性 是grid-column-start和grid-column-end的合并简写形式，例：grid-column: 1 / 2;
grid-row 属性 是grid-row-start属性和grid-row-end的合并简写形式，例：grid-row: 1 / 3;
grid-area 属性 指定项目放在哪一个区域，例：grid-area: e;
justify-self: start | end | center | stretch 设置单元格内容的水平位置（左右中）
align-self: start | end | center | stretch 设置单元格内容的垂直位置（上下中）
place-self: <align-self> <justify-self> 是align-self属性和justify-self属性的合并简写形式