grid 栅格/网格布局学习笔记

1、前言

         栅格布局或者说网格布局是很好用的东西，像一些商城类的排版就很适合用栅格布局，但是存在一定的兼容性问题，兼容性暂时还没有研究，这边学习总结是针对grid也就是栅格布局的使用的学习总结，下面将介绍我认为的常用的几个属性，如果想要更详细的学习，可以参考阮一峰老师的grid布局

2、使用

首先是html

<template>
<div class="grid-box">
  <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 class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
</template>

然后使用grid 布局列与行的列数行数都是根据需求来设置的，可以更改，更详细的可以搜阮一峰老师的grid布局查看，在本文首页有链接

.grid-box {
  // 栅格布局三行三列
  display: grid;
  // 3是多少行列 后面 100px是列宽，行的设置同理
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  .grid-item {
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    background: rgb(239,52,41);
    &:nth-child(2){
      background: rgb(246,143,37);
    }
    &:nth-child(3){
      background: rgb(75,168,70);
    }
    &:nth-child(4){
      background: rgb(4,118,194);
    }
    &:nth-child(5){
      background: rgb(192,119,175);
    }
    &:nth-child(6){
      background: rgb(248,210,157);
    }
    &:nth-child(7){
      background: rgb(180,168,127);
    }
    &:nth-child(8){
      background: rgb(208,228,168);
    }
    &:nth-child(9){
      background: rgb(77,199,236);
    }
  }
}

救会出现这样的效果了

如果想要好看点可以给父容器（.grid-box）加上一点内边距与阴影

padding: 10px;
box-shadow:  0 0 10px #999;

然后就得到了这样效果

此时我么可能会有让各个数字有间隙的需求，此时就可以用上下面两个属性了，也是在父容器设置的

// 行列间距
column-gap: 10px;
row-gap: 10px;

然后效果就是这样的

  此时我们克呢该有会有这样的需求，就是按列排，而不是像上面按行排列，此时就需要使用到

 // 默认是按先行后列的，现在也可以改为先列后行 默认值是 row
 grid-auto-flow: column;

然后效果就是这样的

以上内容的完整代码如下

<template>
<div class="grid-box">
  <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 class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
</template>
<script setup lang='ts'>
</script>
<style scoped lang="scss">
.grid-box {
  // 栅格布局三行三列
  display: grid;
  // 3是多少行列 后面 100px是列宽，行的设置同理
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  // 行列间距
  column-gap: 10px;
  row-gap: 10px;
  padding: 10px;
  box-shadow:  0 0 10px #999;
  // 默认是按先行后列的，现在也可以改为先列后行
  grid-auto-flow: column;
  .grid-item {
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    background: rgb(239,52,41);
    &:nth-child(2){
      background: rgb(246,143,37);
    }
    &:nth-child(3){
      background: rgb(75,168,70);
    }
    &:nth-child(4){
      background: rgb(4,118,194);
    }
    &:nth-child(5){
      background: rgb(192,119,175);
    }
    &:nth-child(6){
      background: rgb(248,210,157);
    }
    &:nth-child(7){
      background: rgb(180,168,127);
    }
    &:nth-child(8){
      background: rgb(208,228,168);
    }
    &:nth-child(9){
      background: rgb(77,199,236);
    }
  }
}
</style>

 假如每个单元格里面各自有内容，可以是使用以下链各个属性进行布局，它们的值可以是

// 设置单元格的布局,但是这两个属性设置后会减该内容压缩，所以使用的时候要注意
// 他么可以取的值是 start | end | center | stretch 
justify-items: center;
align-items: center;

效果是这样的

 还可以设置整体内容的排版

// 设置容器内整体内容的排版
// 可取的值为 start | end | center | stretch | space-around | space-between | space-evenly;
justify-content: center;
align-content: center;

效果

 以上就是我认为常用的容器的属性，解释一下容器与项目(容器内的第一层子元素（项目里面的元素不是项目）)在这里其实就是

.grid-box与.grid-item

3、项目属性

 这里值写四个属性，其实不止，只不过作者是我认为常用的属性

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线

// 设置单元格的内容样式
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;

效果

代码：

<template>
<div class="grid-box">
  <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 class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
</template>
<script setup lang='ts'>
</script>
<style scoped lang="scss">
.grid-box {
  // 栅格布局三行三列
  height: 100%;
  display: grid;
  // 3是多少行列 后面 100px是列宽，行的设置同理
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  // 行列间距
  column-gap: 10px;
  row-gap: 10px;
  padding: 10px;
  box-shadow:  0 0 10px #999;
  // 默认是按先行后列的，现在也可以改为先列后行()colunm)
  grid-auto-flow: row;
  // 设置单元格的布局,但是这两个属性设置后会减该内容压缩，所以使用的时候要注意
  // justify-items: center;
  // align-items: center;
  // 设置容器内整体内容的排版
  justify-content: center;
  align-content: center;
  .grid-item {
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    background: rgb(239,52,41);
    &:nth-child(1) {
      // 设置单元格的内容样式
      grid-column-start: 2;
      grid-column-end: 4;
      grid-row-start: 1;
      grid-row-end: 3;
    }
    &:nth-child(2){
      background: rgb(246,143,37);
    }
    &:nth-child(3){
      background: rgb(75,168,70);
    }
    &:nth-child(4){
      background: rgb(4,118,194);
    }
    &:nth-child(5){
      background: rgb(192,119,175);
    }
    &:nth-child(6){
      background: rgb(248,210,157);
    }
    &:nth-child(7){
      background: rgb(180,168,127);
    }
    &:nth-child(8){
      background: rgb(208,228,168);
    }
    &:nth-child(9){
      background: rgb(77,199,236);
    }
  }
}
</style>

这是一个组件内容，需要在app.vue中引入使用

以上就是我对grid学习的笔记总结，欢迎批评指正，交流学习