用户登录

我们设计的这个布局的主体部分又是一个网格布局。下面一块儿再去处理一下这块内容。在 html 文档,找到 page__main 这个元素,页面的主体内容可以放在这个容器里面。

用一个 div,上面加上 cards 还有 cards--grid 这两个类,这个元素里面可以包装一些内容项目,每个项目放在一个 div 里面,加上一个 card 这个类,再加上一个 wireframe__card,需要 6 个这样的项目。

打开 wireframe.css, 定义一下 .wireframe__card 这个类的样式,用 min-height ,把元素的最小高度设置成 240 像素。再用 background 设置一下背景颜色。

然后打开 page 这个样式表,找到 .page__main , 用 padding 在容器的内部添加 32 像素的边距。 在项目里再新建一个样式表,放在 assets/css 的下面,名字叫 card.css 。 在文档里,链接刚才创建的这个样式表,名字就是 card.css。

在 card 这个样式表里,设计一下 cards--grid 这个类的样式, 让它变成一个网格容器,把 display 设置成 grid。

接着再用 grid-template-columns,设计一下网格的栏,用 repeat 这个功能,第一个参数设置成 auto-fit ,第二个参数用 minmax ,最小宽度设置成 320px,最大是 1fr。

然后用 grid-auto-rows 设置一下网格行的高度,可以是 240 像素。用 gap 设置一下间隔,行和行之间的间隔是 32px,栏和栏之间的间隔也可以设置成 32px。到浏览器上预览一下这个主体里的内容网格。

有些内容项目需要占用两行的高度,可以这样,在这些内容项目的上面添加一个额外的 css 类,比如 card--portrait , 在需要占用两行高度的内容项目的上面都添加这个 css 类

在 card 样式表里,可以设计一下这个 card--portrait 类的样式,grid-row-start 设置成 auto,grid-row-end 设置成 span 2 。

最后到浏览器上再预览一下,你会发现,在应用了 card--portrait 类的内容项目现在就会占用两行的高度。

页面布局(CSS):页面主体内容不规则网格布局《 从设计到代码:布局设计 》

统计

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

社会化网络

关于

微信订阅号

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