---
title: WKRow/WKCol 自适应布局
group:
  title: 基础组件
  path: /base/
---

## 何时使用

需要对网页进行自适应布局时。

- 继承微信 row/col 组件所有属性
- 按照栅格化布局思路，再加上响应式布局的特性，提供了 row/col 两个基础布局组件，用来帮助开发者快速适配多屏应用。
- 核心概念是将整个屏幕宽度分为 24 单位，每个单位的大小，由当前屏幕尺寸决定的。例如 375px 的屏幕宽度，那么 1 unit = 375/24 px.

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import { View, WKRow, WKCol } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
import './index.less';

export default () => {
  return (
    <PageWrapper title="基本使用">
      <View className="content">
        <WKRow gutterVertical={15}>
          <WKCol span={4} offset={1}>
            1
          </WKCol>
          <WKCol span={4} offset={2}>
            2
          </WKCol>
          <WKCol span={4} offset={2}>
            3
          </WKCol>
          <WKCol span={4} offset={2}>
            4
          </WKCol>
        </WKRow>
        <WKRow gutterVertical={15}>
          <WKCol span={5} offset={1}>
            4
          </WKCol>
          <WKCol span={5} offset={1}>
            5
          </WKCol>
          <WKCol span={5} offset={2}>
            6
          </WKCol>
          <WKCol span={5} offset={1}>
            7
          </WKCol>
          <WKCol span={5} offset={1}>
            8
          </WKCol>
          <WKCol span={5} offset={2}>
            9
          </WKCol>
        </WKRow>
      </View>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKRow/index.d.ts' ></API>
