Grid:网格布局

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

把一个容器的 display 设置成 grid,这个容器就可以看成是一个网格容器,容器里直接包含的子容器可以看成是这个网格里的项目,或者叫网格的单元。

先观察一下这段 html,这里有一个带 container 的容器,它里面直接包含了一些子容器,就是这些带 item 类的容器,如果我们把 container 这个类的 display 属性设置成 grid,那它里面的这些带 item 类的容器就是这个网格里的单元。

打开 grid.css 这个样式表,设置一下 .container 这个类的样式,把 display 属性的值设置成 grid,让它变成一个网格容器。保存一下文件。页面的布局跟之前没什么变化。

下面我们可以使用 grid-template-colums 这个属性设置一下网格的 column ,也就是列,或者叫网格的栏。比如我打算让这个网格有三栏内容,每个 column 的宽度是 200px,这个 grid-template-columns 属性的值就可以设置成 200px 200px 200px 。

你会发现,现在页面上显示的这个网格就会分成三栏,每一栏的宽度都是 200 像素。 想要设置一下网格的 row ,可以使用 grid-template-rows,把第一排,第二排,还有第三排的高度都设置成 200px。

如果你想设置一下 row 的默认的高度,可以暂时注释掉这个 grid-template-rows 属性,然后用一个 grid-auto-rows 这个属性,把横排的高度设置成 200px。

Grid:网格布局《 CSS:网格布局 》

统计

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

社会化网络

关于

微信订阅号

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