Foundation 网格实例1

简介: 本文介绍了两个常用的网格布局实例:一是创建三个均等宽度的列(各占33.3%),适用于中大屏幕,小屏时自动堆叠;二是创建三个不同宽度的列(25%/50%/25%),同样在中大屏幕显示三列,小屏时堆叠展示。

Foundation 网格实例
以下我们收集了一些网格常用的实例。

三个均等列
该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ,在中型和大型设备上显示三个列,在小型设备上自动堆叠:

实例



.medium-4




.medium-4




.medium-4



尝试一下 »
三个不均等列
该实例演示了如何创建三个不均等列 (25%/50%/25%),在中型和大型设备上显示三个列,在小型设备上自动堆叠:

实例



.medium-3




.medium-6




.medium-3



相关文章
|
6月前
|
JSON 安全 定位技术
微信附近人提取v3脚本, 微信附近人id提取技术插件,采集附近人wxid数据工具
本内容介绍微信“附近的人”功能的技术原理与实现方法,基于LBS服务,涉及位置模拟、协议分析及数据解析。通过修改GPS坐标或使用Frida等工具hook位置函数
t-io websocket的聊天功能学习记录(一)
t-io websocket的聊天功能学习记录(一)
302 0
|
算法 搜索推荐 Python
Python算法——快速排序
Python算法——快速排序
435 1
|
存储 缓存 Kubernetes
在k8S中,数据持久化的方式有哪些?
在k8S中,数据持久化的方式有哪些?
|
安全 Java 应用服务中间件
基于CAS,实现SSO单点登录,很细
基于CAS,实现SSO单点登录,很细
1769 2
基于CAS,实现SSO单点登录,很细
|
存储 Kubernetes jenkins
k8s-部署jenkins
jenkins部署 jenkins和k8s集成 jenkins基于k8s,执行pipline
k8s-部署jenkins
|
存储 消息中间件 Kubernetes
10分钟在 Rainbond 上部署 mall 电商项目
本文介绍在 Rainbond 上的两种部署 mall 电商项目的方式: 1. 通过 Rainbond 开源应用商店快速部署 mall 2. 从 0 开始部署 mall 项目所有服务
|
数据可视化 图形学 UED
3dsMax2023正式版补丁包序列号高效的三维制作软件
3D Max 2023已经正式发布了,由Autodesk公司开发的一款专业高效的三维制作软件,集三维建模、动画和渲染三大功能于一体,目前广泛应用于工业设计、建筑设计、三维动画、广告、影视、多媒体制作、游戏、辅助教学以及工程可视化等领域。我还是比较习惯用2023的版本。
922 0
阿里云商标注册服务靠谱吗?——失败可退款
阿里云最近行上线了一个服务——商标注册,价格300元起,很是便宜。
39707 2