Foundation 网格系统2

简介: Foundation 网格系统适用于不同设备,包括手机、平板和桌面设备,支持12列布局,具备内嵌、偏移及列排序功能。在宽屏设备上,网格最大宽度为62.5rem,可通过CSS调整max-width或使用背景色跨越全页。

网格选项
下表总结了 Foundation 网格系统在多个设备上的说明:

 小型设备

Phones (<40.0625em (640px)) 中等设备 Tablets (>=40.0625em (640px)) 大设备
Laptops & Desktops (>=64.0625em (1025px))
网格行为 一直是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的
类前缀 .small- .medium- .large-*
类的数量 12 12 12
可内嵌 Yes Yes Yes
偏移量 Yes Yes Yes
列排序 Yes Yes Yes
宽屏
网格最大(.row) 宽度为 62.5rem。在宽屏上,当宽度大于 62.5rem, 列不会跨越页面的宽度, 即使宽度设定为 100%。但你可以通过 CSS 重新设置 max-width:

实例

尝试一下 »
如果你使用默认的 max-width, 但希望背景颜色跨越整个页面宽度,你可以使用 .row 包裹整个容器,并指定你需要的背景颜色:

实例



.small-6

.small-6


相关文章
|
8月前
|
虚拟化 iOS开发 MacOS
VMware ESXi 7.0U3s macOS Unlocker & OEM BIOS 2.7 Intel 网卡特殊定制版
VMware ESXi 7.0U3s macOS Unlocker & OEM BIOS 2.7 Intel 网卡特殊定制版
183 7
VMware ESXi 7.0U3s macOS Unlocker & OEM BIOS 2.7 Intel 网卡特殊定制版
|
前端开发
CSS3:hover&demo
本文介绍了CSS中`hover`伪类的基本用法,包括改变元素自身样式、影响子元素及相邻或后续兄弟元素样式的技巧。同时,还探讨了`:before`和`:after`伪元素的使用方法,以及如何通过CSS实现边框流动效果、创建登录页面、设计轮盘游戏界面和平滑处理文本溢出等实用案例。每个示例都配有代码块,便于理解和实践。
316 4
|
区块链 Python
最详细Python打包exe教程,并修改图标,只需30秒
最详细Python打包exe教程,并修改图标,只需30秒
882 4
最详细Python打包exe教程,并修改图标,只需30秒
|
JavaScript 关系型数据库 MySQL
Python实战:从猎聘网获取职位信息并存入数据库
Python实战:从猎聘网获取职位信息并存入数据库
522 1
|
存储 索引 Python
Python教程:深入了解 Python 中 Dict、List、Tuple、Set 的高级用法
Python 中的 Dict(字典)、List(列表)、Tuple(元组)和 Set(集合)是常用的数据结构,它们各自有着不同的特性和用途。在本文中,我们将深入了解这些数据结构的高级用法,并提供详细的说明和代码示例。
1043 2
|
存储 JSON Linux
portainer使用二进制文件安装
portainer使用二进制文件安装
|
机器学习/深度学习 人工智能 开发者
使用Python实现简单的机器学习分类器
【8月更文挑战第31天】在这篇文章中,我们将探索如何使用Python来创建一个简单的机器学习分类器。通过使用scikit-learn库,我们可以快速构建和训练模型,而无需深入了解复杂的数学原理。我们将从数据准备开始,逐步介绍如何选择合适的模型、训练模型以及评估模型的性能。最后,我们将展示如何将训练好的模型应用于新数据的预测。无论你是机器学习的初学者还是有一定经验的开发者,这篇文章都将为你提供一个实用的指南,帮助你入门并理解基本的机器学习概念。
|
机器学习/深度学习 自然语言处理 PyTorch
大语言模型系列-Transformer(二)
大语言模型系列-Transformer(二)
|
物联网 Java C#
什么?这动物图片可以上国家地理?
众所周知,能上国家地理的照片肯定是好照片,那么我们能不能用SD做出类似国家地理地理风格图片呢?一起来看看吧
什么?这动物图片可以上国家地理?