web前端入门到实战:CSS网格布局(Grid)教程

泄露秘密 提交于 2019-12-14 02:35:26

一、概述

CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。

首先来介绍几个概念:

想象一个三行三列的布局,网格线就是构成网格所有的线条,三行三列的布局每行就会有4条网格线。
网格轨道就是相邻两条平行的网格线之间的部分。

和flex布局一样,他会有父容器和子项目,在这儿我们称为网格容器和网格项。
接下来,我们从网格容器到网格项的各个基本属性来介绍网格布局。

二、 网格容器

将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器,所有容器直接子结点自动成为网格项目。

例1:

网格项目按行排列,网格项目占用整个容器的宽度。

例2:

网格项目按行排列,网格项目宽度由自身宽度决定。

三、显示网格

属性grid-template-rows和grid-template-columns

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

例3:

属性grid-template-rows用于定义行的尺寸,即轨道尺寸。轨道尺寸可以是任何非负的长度值(px,%,em,等)

网格项目1的行高是50px,网格项目2的行高是100px。

因为只定义了两个行高,网格项目3和4的行高取决于其本身的高度。

例4:

类似于行的定义,属性grid-template-columns用于定义列的尺寸。

因为定义中只有三列,所以项目4,5,6排在新的一行; 并因为它们位于第1,2,3列的轨道上,所以其宽度等于定义中第1,2,3列轨道的宽度。

网格项目的第1列,第2列,第3列的宽度分别是 90px, 50px 和 120px 。


如果你依然在编程的世界里迷茫,不知道自己的未来规划,我们的web前端学习交流扣q-u-n:784783012 里面可以与大神一起学习并走出迷茫。小白可进群免费领取学习资料,看看前辈们是如何在编程的世界里傲然前行!不停更新最新的教程和学习方法(进群送web前端系统学习路线,详细的前端项目实战教学视频,PDF),有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入。前端技术分享圈

四、网格项目跨越行列

网格项目默认都占用一行和一列,但可以使用前一节中定位项目的属性来指定项目跨越多行或多列。

例5:

通过grid-column-start和grid-column-end属性值的设置,使该网格项目跨越多列。

五、justify-content 属性,align-content 属性

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

这两个属性的写法完全相同,都可以取下面这些值。(下面的图都以justify-content属性为例,align-content属性的图完全一样,只是将水平方向改成垂直方向。)

start - 对齐容器的起始边框。

end - 对齐容器的结束边框。

center - 容器内部居中。

stretch - 项目大小没有指定时,拉伸占据整个网格容器。

space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。

space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔。

space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。

六、grid-auto-columns 属性,grid-auto-rows 属性

有时候,一些项目的指定位置,在现有网格的外部。比如网格只有3列,但是某一个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。

grid-auto-columns属性和grid-auto-rows属性用来设置,浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。


希望我的文章能够对您有所帮助

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!