
```jsx
import { CRow } from '@coreui/react'
// or
import CRow from '@coreui/react/src/components/grid/CRow'
```

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="crow-class-name">
        <td className="text-primary fw-semibold">className<a href="#crow-class-name" aria-label="CRow className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the base component.</p>
        </td>
      </tr>
      <tr id="crow-lg">
        <td className="text-primary fw-semibold">lg<a href="#crow-lg" aria-label="CRow lg permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The number of columns/offset/order on large devices (&lt;1200px).</p>
        </td>
      </tr>
      <tr id="crow-md">
        <td className="text-primary fw-semibold">md<a href="#crow-md" aria-label="CRow md permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The number of columns/offset/order on medium devices (&lt;992px).</p>
        </td>
      </tr>
      <tr id="crow-sm">
        <td className="text-primary fw-semibold">sm<a href="#crow-sm" aria-label="CRow sm permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The number of columns/offset/order on small devices (&lt;768px).</p>
        </td>
      </tr>
      <tr id="crow-xl">
        <td className="text-primary fw-semibold">xl<a href="#crow-xl" aria-label="CRow xl permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The number of columns/offset/order on X-Large devices (&lt;1400px).</p>
        </td>
      </tr>
      <tr id="crow-xs">
        <td className="text-primary fw-semibold">xs<a href="#crow-xs" aria-label="CRow xs permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The number of columns/offset/order on extra small devices (&lt;576px).</p>
        </td>
      </tr>
      <tr id="crow-xxl">
        <td className="text-primary fw-semibold">xxl<a href="#crow-xxl" aria-label="CRow xxl permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The number of columns/offset/order on XX-Large devices (≥1400px).</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
