.zx-grid {
    display: grid;
    gap: 20px;
}

.zx-grid-desktop-4 {
    grid-template-columns: repeat(4, 1fr);
}

.zx-grid-desktop-3 {
    grid-template-columns: repeat(3, 1fr);
}

.zx-grid-desktop-2 {
    grid-template-columns: repeat(2, 1fr);
}

.zx-grid-desktop-1 {
    grid-template-columns: repeat(1, 1fr);
}

@media (max-width: 1024px) {
    .zx-grid-tablet-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .zx-grid-tablet-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .zx-grid-tablet-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .zx-grid-tablet-1 {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 480px) {
    .zx-grid-mobile-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .zx-grid-mobile-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .zx-grid-mobile-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .zx-grid-mobile-1 {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* 默认响应式降级行为 */
/* 如果只设置了桌面类，平板和移动端自动降级 */
@media (max-width: 1024px) {
    /* 桌面4列 -> 平板2列 */
    .zx-grid-desktop-4:not([class*="zx-grid-tablet-"]) {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 桌面3列 -> 平板2列 */
    .zx-grid-desktop-3:not([class*="zx-grid-tablet-"]) {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 桌面2列 -> 平板2列 */
    .zx-grid-desktop-2:not([class*="zx-grid-tablet-"]) {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 桌面1列 -> 平板2列 */
    .zx-grid-desktop-1:not([class*="zx-grid-tablet-"]) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    /* 未设置移动端类时，所有桌面/平板布局 -> 移动端1列 */
    .zx-grid[class*="zx-grid-desktop-"]:not([class*="zx-grid-mobile-"]),
    .zx-grid[class*="zx-grid-tablet-"]:not([class*="zx-grid-mobile-"]) {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* 自定义宽度控制 - Grid列宽配置 */
/* 使用grid-template-columns直接配置列宽组合 */
/* 桌面端自定义宽度组合 */
.zx-grid-desktop-custom-50-25-25 { grid-template-columns: 50% 25% 25%; }
.zx-grid-desktop-custom-25-50-25 { grid-template-columns: 25% 50% 25%; }
.zx-grid-desktop-custom-25-25-50 { grid-template-columns: 25% 25% 50%; }
.zx-grid-desktop-custom-66-33 { grid-template-columns: 66.66% 33.33%; }
.zx-grid-desktop-custom-33-66 { grid-template-columns: 33.33% 66.66%; }

/* 平板端自定义宽度组合 */
@media (max-width: 1024px) {
    .zx-grid-tablet-custom-50-25-25 { grid-template-columns: 50% 25% 25%; }
    .zx-grid-tablet-custom-25-50-25 { grid-template-columns: 25% 50% 25%; }
    .zx-grid-tablet-custom-25-25-50 { grid-template-columns: 25% 25% 50%; }
    .zx-grid-tablet-custom-66-33 { grid-template-columns: 66.66% 33.33%; }
    .zx-grid-tablet-custom-33-66 { grid-template-columns: 33.33% 66.66%; }
    .zx-grid-tablet-custom-50-50 { grid-template-columns: 50% 50%; }
}

/* 移动端自定义宽度组合 */
@media (max-width: 480px) {
    .zx-grid-mobile-custom-50-50 { grid-template-columns: 50% 50%; }
}

/* 辅助布局类 */

/* 网格对齐控制 */
.zx-grid-align-center { align-items: center; }
.zx-grid-align-start { align-items: start; }
.zx-grid-align-end { align-items: end; }
.zx-grid-align-stretch { align-items: stretch; }

.zx-grid-justify-center { justify-content: center; }
.zx-grid-justify-start { justify-content: start; }
.zx-grid-justify-end { justify-content: end; }
.zx-grid-justify-between { justify-content: space-between; }

/* 间距调整类 */
.zx-grid-gap-5 { gap: 5px; }
.zx-grid-gap-10 { gap: 10px; }
.zx-grid-gap-20 { gap: 20px; }
.zx-grid-gap-30 { gap: 30px; }
.zx-grid-gap-40 { gap: 40px; }
.zx-grid-gap-50 { gap: 50px; }
.zx-grid-gap-60 { gap: 60px; }

/* 设备可见性控制 */
/* 仅在桌面显示 */
@media (max-width: 1024px) {
    .zx-hide-tablet {
        display: none!important;
    }
}

@media (max-width: 480px) {
    .zx-hide-mobile {
        display: none!important;
    }
}

/* 仅在平板显示 */
@media (min-width: 481px) and (max-width: 1024px) {
    .zx-only-tablet {
        display: block;
    }
}

@media (min-width: 769px), (max-width: 480px) {
    .zx-only-tablet {
        display: none;
    }
}

/* 仅在移动端显示 */
@media (max-width: 480px) {
    .zx-only-mobile {
        display: block;
    }
}

@media (min-width: 481px) {
    .zx-only-mobile {
        display: none;
    }
}

/* 边距控制 */
.zx-p-0 { padding: 0; }
.zx-p-10 { padding: 10px; }
.zx-p-20 { padding: 20px; }
.zx-p-30 { padding: 30px; }

.zx-m-0 { margin: 0; }
.zx-m-10 { margin: 10px; }
.zx-m-20 { margin: 20px; }
.zx-m-30 { margin: 30px; }

/* 内容块内边距重置 */
.zx-grid > * {
    box-sizing: border-box;
}

/* 显示顺序控制类 */
/* 使用CSS Grid的order属性调整元素在网格中的显示顺序 */
/* 基础顺序类（默认应用于所有断点） */
.zx-order-1 { order: 1; }
.zx-order-2 { order: 2; }
.zx-order-3 { order: 3; }
.zx-order-4 { order: 4; }
.zx-order-5 { order: 5; }
.zx-order-6 { order: 6; }
.zx-order-7 { order: 7; }
.zx-order-8 { order: 8; }
.zx-order-9 { order: 9; }
.zx-order-10 { order: 10; }
.zx-order-11 { order: 11; }
.zx-order-12 { order: 12; }

/* 桌面端特定顺序控制 */
@media (min-width: 769px) {
    .zx-order-desktop-1 { order: 1; }
    .zx-order-desktop-2 { order: 2; }
    .zx-order-desktop-3 { order: 3; }
    .zx-order-desktop-4 { order: 4; }
    .zx-order-desktop-5 { order: 5; }
    .zx-order-desktop-6 { order: 6; }
    .zx-order-desktop-7 { order: 7; }
    .zx-order-desktop-8 { order: 8; }
    .zx-order-desktop-9 { order: 9; }
    .zx-order-desktop-10 { order: 10; }
    .zx-order-desktop-11 { order: 11; }
    .zx-order-desktop-12 { order: 12; }
}

/* 平板端特定顺序控制 */
@media (min-width: 481px) and (max-width: 1024px) {
    .zx-order-tablet-1 { order: 1; }
    .zx-order-tablet-2 { order: 2; }
    .zx-order-tablet-3 { order: 3; }
    .zx-order-tablet-4 { order: 4; }
    .zx-order-tablet-5 { order: 5; }
    .zx-order-tablet-6 { order: 6; }
    .zx-order-tablet-7 { order: 7; }
    .zx-order-tablet-8 { order: 8; }
    .zx-order-tablet-9 { order: 9; }
    .zx-order-tablet-10 { order: 10; }
    .zx-order-tablet-11 { order: 11; }
    .zx-order-tablet-12 { order: 12; }
}

/* 移动端特定顺序控制 */
@media (max-width: 480px) {
    .zx-order-mobile-1 { order: 1; }
    .zx-order-mobile-2 { order: 2; }
    .zx-order-mobile-3 { order: 3; }
    .zx-order-mobile-4 { order: 4; }
    .zx-order-mobile-5 { order: 5; }
    .zx-order-mobile-6 { order: 6; }
    .zx-order-mobile-7 { order: 7; }
    .zx-order-mobile-8 { order: 8; }
    .zx-order-mobile-9 { order: 9; }
    .zx-order-mobile-10 { order: 10; }
    .zx-order-mobile-11 { order: 11; }
    .zx-order-mobile-12 { order: 12; }
}

.zx-absolute {
    position: absolute!important;
}

.zx-relative {
    position: relative;
}

.zx-fixed {
    position: fixed;
}

/* 绝对定位左边距控制 */
.zx-left-0 { left: 0; }
.zx-left-4 { left: 1rem; }
.zx-left--6 { left: -1.5rem; }

/* 绝对定位右边距控制 */
.zx-right-0 { right: 0; }

/* 绝对定位上边距控制 */
.zx-top-0 { top: 0; }
.zx-top-4 { top: 1rem; }

/* 绝对定位下边距控制 */
.zx-bottom-0 { bottom: 0; }
.zx-bottom--6 { bottom: -1.5rem; }


/* 使用示例与最佳实践 */
/*

使用方法：
1. 在WordPress区块编辑器中添加"群组"区块
2. 在区块设置 > 高级 > 额外CSS类中添加所需的CSS类
3. 多个类之间用空格分隔

示例1：基本响应式布局（自动降级）
- 桌面：4列
- 平板：2列（自动降级）
- 移动端：1列（自动降级）
CSS类：zx-grid zx-grid-desktop-4

示例2：完全自定义响应式布局
- 桌面：4列
- 平板：3列
- 移动端：2列
CSS类：zx-grid zx-grid-desktop-4 zx-grid-tablet-3 zx-grid-mobile-2

示例3：自定义宽度比例布局
- 桌面：50% 25% 25%
- 平板：2列（各50%）
- 移动端：1列
CSS类：zx-grid zx-grid-desktop-custom-50-25-25 zx-grid-tablet-custom-50-50

示例4：带对齐和间距的布局
- 桌面：3列，垂直居中对齐，间距30px
CSS类：zx-grid zx-grid-desktop-3 zx-grid-align-center zx-grid-gap-30

示例5：设备可见性控制
- 仅在桌面显示：zx-hide-tablet zx-hide-mobile
- 仅在平板显示：zx-only-tablet
- 仅在移动端显示：zx-only-mobile

示例6：显示顺序调整
- 场景：桌面端图片在左，文字在右；移动端文字在上，图片在下
- 实现：
  1. 文字区块：zx-order-mobile-1
  2. 图片区块：zx-order-mobile-2

- 复杂场景：4列布局在移动端重新排序
  1. 区块1（桌面第1列）：zx-order-mobile-3
  2. 区块2（桌面第2列）：zx-order-mobile-1
  3. 区块3（桌面第3列）：zx-order-mobile-4
  4. 区块4（桌面第4列）：zx-order-mobile-2

最佳实践：
1. 始终以.zx-grid作为基础类
2. 遵循移动优先设计原则
3. 仅在需要时添加特定设备的类（利用自动降级）
4. 使用自定义宽度类时确保子元素数量匹配列数
5. 测试不同设备尺寸的显示效果
6. 保持CSS类名简洁明了
7. 避免过度使用自定义宽度类，优先使用等分布局
8. 合理使用显示顺序控制，确保内容逻辑在所有设备上清晰
9. 对于复杂顺序调整，建议先在移动端设计最佳阅读顺序，再考虑桌面端布局
10. 注意：显示顺序控制仅在网格布局（.zx-grid）内生效

*/