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


相关文章
Foundation 网格实例1
本文介绍了两个常用的网格布局实例:一是创建三个均等宽度的列(各占33.3%),适用于中大屏幕,小屏时自动堆叠;二是创建三个不同宽度的列(25%/50%/25%),同样在中大屏幕显示三列,小屏时堆叠展示。
Foundation 网格实例6
在Foundation框架中,若一行中列数总和不足12,系统会自动将最后一列右移以填满剩余空间。使用.end类可使最后一列左对齐。示例代码展示了两行三列布局,第二行最后一列应用了.end类。
Foundation 网格实例5
列布局中,`.small-centered` 类可使列在小屏幕上居中,大屏幕需额外添加 `.large-centered`。列偏移通过 `.large-offset-*`(或 `.small-offset-*`)实现,* 表示向右移动的列数。示例展示了不同宽度和偏移量的列布局效果。
|
5天前
|
前端开发 容器
Foundation 网格实例7
在宽屏设备上,.row 的最大宽度为 62.5rem,可能导致列无法完全填充页面。通过设置 .row 的 max-width 为 100%,可以解决此问题。若需背景色覆盖全页,可在容器元素上应用 .row 类并设置背景色。
Foundation 网格实例2
本示例展示了如何在不同尺寸的设备上创建两个固定比例的列布局:一是两列均等(50%/50%),二是两列不均等(33.3%/66.6%)。通过使用类如 `.small-6` 和 `.small-8 .small-4` 来实现响应式设计。
Foundation 网格实例4
Foundation网格系统支持手机、平板和桌面设备,通过.small-、.medium-、.large-类动态调整布局。例如,.small-6 .large-8表示在小屏幕上占6列,在大屏幕上占8列,实现响应式设计。
Foundation 网格 - 大型设备
在大型设备上,推荐使用33%/66%的网格布局比例(.large-4 和 .large-8)。大型设备屏幕尺寸大于64.0625em。注意,布局总列数应保持为12列。例如,在大型设备上使用 .large-6 类可实现50%/50%的布局,而在中型或小型设备上则会变为100%宽度的堆叠布局。
Foundation 网格 - 小型设备
在Foundation框架中,针对屏幕宽度小于40.0625em的小型设备,使用.small-*类创建了一个简单的两列网格布局,列宽比为25%和75%。此布局遵循移动优先原则,在大屏设备上同样适用,确保总列数为12。例如,可使用.small-3和.small-9实现该布局。
Foundation 网格 - 中型设备
在Foundation网格系统中,针对中型设备(屏幕尺寸40.0625em至64.0624em),推荐使用50%/50%的布局比例,并通过`.medium-*`类实现。此布局在小型设备上默认为25%/75%,而在中型设备上调整为50%/50%,确保布局适应不同屏幕尺寸。示例中展示了如何在中型设备上应用这一布局。
Foundation 块状网格
块状网格用于页面内容的均匀分布,如在一行中显示四张图片。通过为元素添加 .small|medium|large-block-grid-num 类来实现,其中 num 指定均分数。支持不同屏幕尺寸下显示不同数量的块。