Grid 样式

EmptyDust2025/8/2大约 3 分钟约 833 字

Grid 样式

概述

Grid 样式用于创建网格布局组件，支持响应式设计，在不同屏幕尺寸下自动调整网格项的数量和布局。适用于导航菜单、功能模块等场景。

语法

`.innenu-grid`

网格主容器样式。

.innenu-grid {
  display: flex;
  flex-wrap: wrap;
}

`.innenu-grid-icon`

网格图标样式。

.innenu-grid-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 20px;
}

`.innenu-grid-item`

网格项样式。

.innenu-grid-item {
  width: calc(25% - 10px);
  margin: 5px;
  padding: 10px 0;
  border-radius: 6px;
  text-align: center;
  color: var(--vp-c-text);
  background-color: var(--vp-c-control);

  @media (min-width: hope-config.$tablet) {
    width: calc(16.666% - 10px);
  }

  @media (min-width: hope-config.$pc) {
    width: calc(12.5% - 10px);
  }

  &:hover {
    background-color: var(--vp-c-control-hover) !important;
    text-decoration: none !important;
  }
}

`.innenu-grid-text`

网格文本样式。

.innenu-grid-text {
  color: var(--vp-c-text-mute);
  font-size: 14px;
}

网格页脚样式。

.innenu-grid-footer {
  min-height: 16px;
  padding: 5px 16px;
  color: var(--vp-c-text-mute);
  font-size: 13px;
  text-align: left;
}

属性说明

类名	主要属性	说明
`.innenu-grid`	`display: flex`, `flex-wrap: wrap`	主容器，弹性布局，自动换行
`.innenu-grid-icon`	`width: 28px`, `height: 28px`, `font-size: 20px`	图标，固定尺寸，居中显示
`.innenu-grid-item`	`width: calc(25% - 10px)`, `border-radius: 6px`	网格项，响应式宽度，圆角
`.innenu-grid-text`	`color: var(--vp-c-text-mute)`, `font-size: 14px`	文本，主题色，小字体
`.innenu-grid-footer`	`font-size: 13px`, `color: var(--vp-c-text-mute)`	页脚，小字体，主题色

响应式断点

断点	设备	网格项宽度	每行项目数
默认	移动设备	`calc(25% - 10px)`	4 个
`hope-config.$tablet`	平板及以上	`calc(16.666% - 10px)`	6 个
`hope-config.$pc`	桌面及以上	`calc(12.5% - 10px)`	8 个