Grid布局 容器属性(二)

CSS 布局
前端
发布日期:   2022-07-05
文章字数:   1.3k
阅读时长:   5 分
阅读次数:  

Grid布局 容器属性(二)

基础代码

HTML(box的子元素可能会增加、减少)

1
2
3
4
5
6
7
8
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
.box {
    width: 300px;
    height: 300px;
}

.box div:nth-child(odd) {
    background-color: pink;
}

.box div:nth-child(even) {
    background-color: purple;
}

row-gap、column-gap属性

row-gap设置行间距，column-gap设置列间距。

1
2
3
grid-template-columns: repeat(3, 1fr);
row-gap: 10px;
column-gap: 20px;

gap属性

gap属性是row-gap和column-gap的简写形式。

1
gap: <row-gap> <column-gap>;
1
gap: 10px 20px;

结果和上图一样。

如果只有一个值，那么行间距、列间距都是该值。

1
gap: 20px;

grid-auto-flow属性

grid-auto-flow属性指定在网格中被自动布局的元素怎样排列。默认值是row，即先行后列。

1
2
3
grid-template-rows: 50% 50%;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;    /* 这里有没有都是一样的结果 */

设置成column的话，就会按先列后行的顺序来排列。

1
2
3
grid-template-rows: 50% 50%;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column;

下面还需要讲一下设置row或column的同时添加dense的情况。加了dense表示尽可能紧密填满。

1
2
3
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
1
2
3
4
5
6
.box div:nth-child(3) {
    /* 后续将项目属性时会细讲。 */
    /* auto: 表示该项目对网格项目没有任何贡献。实际没有它也行。暂时找不到必须要的理由 */
    /* span: 表示跨越，即占多少个格 */
    grid-column: auto / span 2;
}

如果需要紧密填满的话，只需要将grid-auto-flow属性变成row dense即可。之后4就会往上移，补空位，5、6也依次补上去。

单元格内容排列

和单元格排列有关的主要有两个属性。

  • justify-items：设置单元格内容的水平位置
  • align-items：设置单元格内容的垂直位置

它们的取值都是一样的：

  • start: 对齐单元格的起点
  • end: 对齐单元格的终点
  • center：单元格内容居中
  • stretch: 拉伸占满单元格(默认值)

justify-items属性

上面已经简单介绍过了，其实和flex的差不太多，接下来来一下实例加深一下印象。

box元素的CSS基础代码加一下下面的内容。(方便体验)

1
2
3
grid-template-rows: repeat(2, 20%);
grid-template-columns: repeat(3, 20%);
background-color: skyblue;

stretch: 效果和上图一样。因为默认值就是stretch

1
justify-items: stretch;

**start**：

1
justify-items: start;


注意：不再是stretch之后，单元格内容的大小就不会是单元格本身的大小了，而是真正内容的大小。例如，上面的例子中，没有设置宽度，真正内容大小就是文字的大小。

**end**：

1
justify-items: end;

**center**：

1
justify-items: center;

align-items属性

start:

1
align-items: start;

end:

1
align-items: end;

center:

1
align-items: center;

place-items属性

place-items属性是align-items和justify-items的简写形式。

语法：

1
place-items: <align-items> <justify-items>;

示例：

1
place-items: start center;


水平方向居上，垂直方向居中。

需要水平垂直居中只需要值都设置为center即可，如果省略第二个值，则第二个值会等于第一个值。也就是说水平垂直居中只需要place-items: center;即可。

整体内容排列

box元素的CSS基础代码还是要加一下下面的内容。(方便体验)

1
2
3
grid-template-rows: repeat(2, 20%);
grid-template-columns: repeat(3, 20%);
background-color: skyblue;

和单元格排列有关的主要有两个属性。

  • justify-content：设置整体内容的水平位置
  • align-items：设置整体内容的垂直位置

它们的取值都是一样的：

  • start、end、center、stretch和单元格排列部分的一样，只是对齐的不再是单元格，而是容器了。
  • space-around：每个项目两侧的间隔相等，项目之间的间隔会比容器边框的间隔大一倍。
  • space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔
  • space-evenly：项目与项目、项目与容器边框之间的间隔都相等。

justify-content属性

简单举几个实例，基本看看结果+看看概念就懂了(真正懂需要开发时经常使用)
center:

1
justify-content: center;

space-around:

1
justify-content: space-around;

space-between:

1
justify-content: space-between;

space-evenly:

1
justify-content: space-evenly;

align-content属性

和justify-content属性一样，只是从水平方向变成了垂直方向。

place-content属性

place-content属性是align-content和justify-content的简写形式。

语法：

1
place-content: <align-content> <justify-content>;

示例：

1
place-content: space-between center;

start和stretch的区别

用上面的例子测试，如果使用start和stretch,会发现它们的结果一样。

这是因为我们的项目大小已经固定好了，如果变成auto的话，就能看出start和stretch的区别了。

stretch: 会拉伸占满容器

1
2
3
grid-template-rows: repeat(2, 20%);
grid-template-columns: repeat(3, auto);
justify-content: stretch;

start：真正内容的大小，不会拉伸。

参考链接：

文章作者: 赤蓝紫
文章链接: https://www.clzczh.top/2022/07/05/grid-2/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 赤蓝紫 !
CSS 布局
评论
  目录