用户登录

下面我们试着可以设置一下 壹 这个网格项目的位置。把它放在 1 号栏线到 4 号栏线之间。回到编辑器,先修改一下这个网格,把 grid-template-column 的值,设置成 repeat ,重复的次数是 3, 1fr。这样我们就得到了一个三栏三行的网格。

在 壹 这个网格项目的容器上面,有一个 item__1 这个类,我们可以使用这个类的名字作为样式的选择器,在这个容器上设置点样式。

设置一下 .item__1 的样式,这里可以用一下 grid-column-start 属性,把它的值设置成 1,意思就是,让这个网格项目,从 1 号栏线开始,下面再用一个 grid-column-end 属性,设置一下结束的位置,结束位置的栏线编号设置成 4 。

现在你会发现,壹 这个网格项目的变化,它的位置是从 1 号栏线开始的,位置结束的栏线编号是 4。

下面我们可以再设置一下这个网格项目的行的位置,从 1 号行线开始,到 3 号行线结束。 设置一下 .item__1 这个类的样式。设置一下 grid-row-start 这个属性,把这个项目的行线的开始位置设置成 1, 下面再用一个 grid-row-end,结束的行线的位置设置成 3 。

保存一下文件,然后观察一下 壹 这个网格项目的位置。 这里我们再把这个 grid-row-start 属性的值设置成 2 ,这样这个项目的行线会从 2 号线开始。 所以你会发现,这个项目就跑到 二,三,四这几个项目的下面来了。

恢复一下,让 grid-row-start 属性的值等于 1 。

下面我们再设置一下 二 这个项目的位置,这个项目的容器上面有个 item__2 这个 css 类,可以用它作为样式的选择器。

这里我们用 grid-row-start 设置一下项目的行线开始位置,可以设置成 3,这个位置应该就是这个项目现在的行线开始的位置。然后再用 grid-row-end 设置一下它的结束位置的行线编号,比如把它设置成 5 。 在没设置这个属性之前,它的结束位置的行线编号应该是 4。

保存一下,然后观察 二 这个网格项目位置的变化。 现在它的开始行线编号是 3,结束行线编号是 5 。

设置网格项目的位置《 CSS:网格布局 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点