一、设计理念

基于CSS Grid和CSS变量的动态网格系统，实现从1列到12列的智能切换，间距自动优化

二、核心实现

:root {
  --grid-columns: 12;
  --grid-gap: 1.5rem;
  --item-min-width: 250px;
}

.grid-system {
  display: grid;
  grid-template-columns: repeat(
    auto-fit, 
    minmax(min(var(--item-min-width), 100%), 1fr)
  );
  gap: var(--grid-gap);
  padding: var(--grid-gap);
}

.grid-item {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  padding: 1.5rem;
}

.grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* 容器查询实现响应式 */
@container (width > 1200px) {
  .grid-system {
    --grid-columns: 4;
  }
}

@container (width > 900px) and (width  600px) and (width <= 900px) {
  .grid-system {
    --grid-columns: 2;
  }
}

/* 特殊项目跨列 */
.grid-item.featured {
  grid-column: span var(--grid-columns);
  --item-min-width: 100%;
}

三、高级特性

.grid-system {
  --gap-ratio: 0.5;
  
  gap: calc(
    var(--grid-gap) * var(--gap-ratio) 
    min(var(--grid-gap), 5vw)
  );
}

/* 密集填充模式 */
.grid-system.dense {
  grid-auto-flow: dense;
}

/* 自动边距平衡 */
.grid-system.padded {
  --grid-gap: 0;
}

.grid-system.padded > .grid-item {
  margin: calc(var(--grid-gap) / 2);
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .grid-item {
    background: #2d3748;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    color: #f8f9fa;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: more) {
  .grid-item {
    border: 2px solid currentColor;
  }
}

/* 运动偏好减少 */
@media (prefers-reduced-motion) {
  .grid-item {
    transition: none;
  }
}

四、完整案例

<div class="grid-system" style="--grid-columns: 3; --item-min-width: 300px">
  <div class="grid-item">
    <h3>产品卡片</h3>
    <p>自适应内容区域</p>
  </div>
  
  <div class="grid-item featured">
    <h3>特色产品</h3>
    <p>自动跨列显示</p>
  </div>
  
  <div class="grid-item" style="--item-min-width: 200px">
    <h3>自定义宽度</h3>
    <p>独立设置最小宽度</p>
  </div>
  
  <!-- 更多网格项目 -->
</div>

<style>
  /* 移动端响应式 */
  @media (max-width: 768px) {
    .grid-system {
      --grid-columns: 1 !important;
    }
  }
</style>