一、布局革命

基于CSS Grid+Flexbox+CSS变量的多栏布局系统，零JavaScript实现智能等高和动态排序

二、核心技术实现

.layout-container {
  --column-count: 3;
  --gap-size: 20px;
  
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
  grid-auto-rows: 1fr; /* 关键等高设置 */
  gap: var(--gap-size);
  align-items: stretch;
}

.layout-item {
  display: flex;
  flex-direction: column;
  min-height: 100%; /* 继承grid行高 */
}

.item-content {
  flex: 1; /* 内容区域撑满剩余空间 */
  padding: 15px;
  background: linear-gradient(to bottom, 
    var(--item-bg, #f5f5f5), 
    var(--item-accent, #e0e0e0));
}

@media (max-width: 1024px) {
  .layout-container {
    --column-count: 2;
    --gap-size: 15px;
  }
}

@media (max-width: 600px) {
  .layout-container {
    --column-count: 1;
    --gap-size: 10px;
  }
}

/* 动态排序控制 */
.layout-item:nth-child(odd) {
  order: 1;
}

.layout-item.featured {
  order: -1; /* 特色项目置顶 */
  grid-column: span var(--column-count);
  --item-bg: #fff8e1;
  --item-accent: #ffecb3;
}

三、高级特效

@supports (grid-template-rows: masonry) {
  .layout-container {
    grid-template-rows: masonry; /* 实验性瀑布流 */
  }
}

/* 传统浏览器备用方案 */
.layout-item {
  break-inside: avoid; /* 防止内容截断 */
}

@container (min-width: 400px) {
  .item-content {
    padding: 20px;
  }
}

.layout-item {
  transition: all 0.3s ease;
  transform-origin: center;
}

.layout-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  --item-accent: #bbdefb;
}

/* 焦点样式 */
.layout-item:focus-within {
  outline: 2px solid var(--primary-color);
  z-index: 1;
}

四、完整案例

<div class="layout-container" style="--column-count: 4">
  <article class="layout-item">
    <div class="item-content">
      <h3>项目标题</h3>
      <p>内容自动撑开高度</p>
    </div>
  </article>
  
  <article class="layout-item featured">
    <div class="item-content">
      <h3>特色项目</h3>
      <p>跨栏显示并置顶</p>
    </div>
  </article>
  
  <!-- 更多项目... -->
</div>

<style>
  /* 夜间模式适配 */
  @media (prefers-color-scheme: dark) {
    .layout-container {
      --item-bg: #424242;
      --item-accent: #616161;
    }
  }
</style>