/* 网格系统 */
.grid {
    display: grid;
    gap: 20px;
}

/* 基本网格列配置 */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* 响应式网格配置 */
@media (max-width: 640px) {
    .grid-cols-sm-1 { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-sm-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .grid-cols-md-1 { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-md-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-md-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-md-4 { grid-template-columns: repeat(4, 1fr); }
}

/* 网格间距 */
.gap-small { gap: 10px; }
.gap-medium { gap: 20px; }
.gap-large { gap: 30px; }
.gap-xl { gap: 40px; }

/* 网格跨列 */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }

/* 网格跨行 */
.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }

/* 对齐方式 */
.grid-center { place-items: center; }
.grid-start { place-items: start; }
.grid-end { place-items: end; }

/* 自动适应列 */
.grid-auto-cols { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }