GH BLOGS

Appearance

网格布局 ​

概述 ​

grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

项目和容器 ​

  • 如下代码,container则是容器,item则是项目
vue
<template>
  <div class="container">
    <div class="item" v-for="i in 9">{{ i }}</div>
  </div>
</template>
<style scoped lang="less">
  .container {
    display: grid; // grid | subgrid |inline-grid
  }
</style>
<template>
  <div class="container">
    <div class="item" v-for="i in 9">{{ i }}</div>
  </div>
</template>
<style scoped lang="less">
  .container {
    display: grid; // grid | subgrid |inline-grid
  }
</style>
  • grid | subgrid |inline-grid
    • grid：定义一个块级的网格容器
    • inline-grid：定义一个内联的网格容器
    • subgrid：定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项，不同目前仅有 Firefox 支持，所以目前不建议使用

行和列 ​

  • 定义容器行和列 grid-template-columns 属性定义每一列的列宽，grid-template-rows 属性定义每一行的行高。可写成百分比也可以写成像素单位;
css
.container{
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 列宽 */
  grid-template-rows: 100px 100px 100px;
}
.container{
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 列宽 */
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5
6
7
8
9
  • 也可以使用其他宽度单位
css
.container{
  display: grid;
  grid-template-columns: 33% 200px calc(100% / 4); /* 列宽 */
}
.container{
  display: grid;
  grid-template-columns: 33% 200px calc(100% / 4); /* 列宽 */
}
1
2
3
4
5
6
7
8
9
  • 重复函数 CSS 3 也提供了一个 repeat() 函数，上面的代码可以写成这样;
css
.container {
  width: 600px;
  height: 600px;
  display: grid;
  grid-template-columns: repeat(3, calc(100% / 3)); /* 列宽 */
  grid-template-rows: repeat(3, 200px); /* 行高 */
}
.container {
  width: 600px;
  height: 600px;
  display: grid;
  grid-template-columns: repeat(3, calc(100% / 3)); /* 列宽 */
  grid-template-rows: repeat(3, 200px); /* 行高 */
}
1
2
3
4
5
6
7
8
9

repeat() 可以接受两个参数，前面一个是重复次数，后面一个是重复的内容

css
.container{
  grid-template-columns: repeat(2, calc(100% / 3) 20% 100px);
}
.container{
  grid-template-columns: repeat(2, calc(100% / 3) 20% 100px);
}
1
2
3
4
5
6
7
8
9
  • 自动填充 有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 auto-fill 关键字表示自动填充：
css
.container{
  grid-template-columns: repeat(auto-fill, 100px 200px);
}
.container{
  grid-template-columns: repeat(auto-fill, 100px 200px);
}
1
2
3
4
5
6
7
8
9
  • 比例填充 为了方便表示比例关系，网格布局提供了 fr 关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为 1fr 和 2fr，就表示后者是前者的两倍：
css
.container{
  grid-template-columns: 100px 1fr 2fr 3fr;
}
.container{
  grid-template-columns: 100px 1fr 2fr 3fr;
}
1
2
3
4
5
6
7
8
9
  • 长度范围 minmax() 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值：
css
.container{
  /* 表示三等分,均分容器网格宽度不会小于100px */
  grid-template-columns: repeat(3, minmax(100px, calc(100% / 3)));
}
.container{
  /* 表示三等分,均分容器网格宽度不会小于100px */
  grid-template-columns: repeat(3, minmax(100px, calc(100% / 3)));
}
1
2
3
4
5
6
7
8
9
  • 自动长度
css
.container{
  grid-template-columns: repeat(3, auto);
}
.container{
  grid-template-columns: repeat(3, auto);
}
1
2
3
4
5
6
7
8
9
css
.container{
  grid-template-columns: 100px auto 100px;
}
.container{
  grid-template-columns: 100px auto 100px;
}
1
2
3
4
5
6
7
8
9

栗子都是以列(宽)为例,行(高）同理;

网格线的名称 ​

grid-template-columns 属性和 grid-template-rows 属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用:

css
.container{
  grid-template-columns: [c1] auto [c2] 150px [c3] 150px [c4];
}
.container{
  grid-template-columns: [c1] auto [c2] 150px [c3] 150px [c4];
}
1
2
3
4
5
6
7
8
9

定义容器区域 ​

css
.container{
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}
.container{
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}
a
b
c
d
e

定义行列间距 ​

默认的网格，项目之间是没有间距的，为了让项目看起来更分明，我们可以通过定义行列的间距，来分割开各个项目。 CSS 3 提供了三个和网格间距有关的属性：

  • row-gap：定义行间距
  • column-gap：定义列间距
  • gap：简写属性，定义行列间距

示例 ​

Copyright © 2023 YGHHJS