51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

CSS Grid Overlay

ID: hajfilceeneohkmcakehndmaeonhlack

提供方: imagentleman.github.io

版本: 10

大小: 181KB

更新时间: 2023-03-05 17:02:32

支持语言: 英语

简介:

跨断点轻松检查页面的网格对齐方式。
支持多个断点和常用的网格值(间距、列、最大宽度等)。

配置可以很容易地作为 json 对象在团队成员之间保存和共享。

示例配置文件:

[
{
"列":4,
"margins": 16, // 第一列和最后一列前后的 px
// 这些排水沟像边距一样工作:
// 如果列间距为 32px,则间距为 16
"排水沟":16,
"from": 0, // 断点起始点,单位 px
// 可选值
// "to": 599, 以像素为单位的断点结束
// 网格将在这个以像素为单位的最大宽度之后居中
// 否则它将是全宽
// "最大宽度": 1440,
// 如果你想移动网格
//(例如,在带有左侧边栏的样式指南中
// 你会使用 offsetLeft 将网格推到右边
// "offsetTop": 0,
// "偏移量": 0,
// "offsetBottom": 0,
// "偏移左": 0,
// "背景颜色":{
// "列": "rgba(234, 23, 140, .3)",
// "排水沟": "rgba(0, 231, 255, .3)",
// "边距": "rgba(0, 191, 165, .3)"
// }
}
]

插件下载:

赞(9)
未经允许不得转载:工具盒子 » CSS Grid Overlay