现代 CSS

图解CSS:Grid布局案例之构建交叉布局

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

前两个有关于 CSS Grid 案例,主要介绍了如何使用 CSS Grid 来构建 重叠布局Full-Bleed 布局。今天我们来一起再来看另一个由 CSS Grid 构建的网格布局,即 交叉布局。通过这个案例来更好的帮助我们更进一步理解 CSS Grid 的相关属性在实际中(Web 布局)如何使用。

什么是交叉布局

什么是交叉布局?或者说交叉布局是什么样子的。使用一张图来向大家展示什么是交叉布局,毕竟一图胜过千言万言。

我们可以在上面的每个不同的颜色区域中填充 Web 中所需要的媒体元素:

上面这样的 UI 布局常称为 交叉布局。我们可以在这个基础进行扩展,让其变得更复杂一点:

看上去不复杂,很简单,对吧。我在 CodePen 上搜索了一下交叉布局,可以找到相似的布局效果。比如 @Soapp使用 CSS Grid 构建的布局

接下来,我们就以此例作为今天的目标,看看使用 CSS Grid 布局这样的布局会用到网格布局哪些特性。

网格骨架

使用浏览器网格审查器,可以一目了然的知道@Soapp使用 CSS Grid 构建的布局的网格分布:

在 CSS Grid 中,我们可以使用很多方法来定义上图这样的网格,来构建所需的布局。如果忽略布局的中的内容元素(内容可以根据你的喜好填充),就留下了网格形态和一个网格骨架图:

从上图的网格骨架图中,不能发现,我们需要显式创建一个 4 x 3 (三行四列) 的网格,同时每个网格项目都有相应的网格单元格合并(跨越列或跨越行)。

不难发现,这是一个含有五个网格项目的网格布局,相应的 HTML 结构如下:

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item">
        <!-- 跨越3列 -->
    </div>

    <div class="grid__item">
        <!-- 跨越 2行 -->
    </div>

    <div class="grid__item">
        <!-- 跨越 2行 -->
    </div>

    <div class="grid__item">
        <!-- 跨越 2列 -->
    </div>

    <div class="grid__item">
        <!-- 跨越 3列 -->
    </div>
</d
剩余80%内容付费后可查看
返回顶部