Split 分栏布局

基本语法

<c-split cols="列数" gap="间距">
  <div>第一列内容</div>
  <div>第二列内容</div>
</c-split>

参数说明

使用示例

示例 1：两栏对比

<c-split cols="2">
  <div>
    <h4>优点</h4>
    <ul>
      <li>性能优秀</li>
      <li>体积小巧</li>
      <li>易于上手</li>
    </ul>
  </div>
  <div>
    <h4>缺点</h4>
    <ul>
      <li>生态较小</li>
      <li>社区资源少</li>
    </ul>
  </div>
</c-split>

示例 2：三栏布局

<c-split cols="3" gap="2rem">
  <div>
    <h4>🚀 快速</h4>
    <p>基于现代构建工具</p>
  </div>
  <div>
    <h4>💡 简单</h4>
    <p>开箱即用的配置</p>
  </div>
  <div>
    <h4>🔧 灵活</h4>
    <p>高度可定制化</p>
  </div>
</c-split>

示例 3：响应式自动列数

<c-split cols="250px">
  <div>卡片1</div>
  <div>卡片2</div>
  <div>卡片3</div>
  <div>卡片4</div>
</c-split>

效果：每列最小 250px，根据屏幕宽度自动调整列数

使用效果