# @teambit/base-ui.layout.grid-component

> Basic grid element for 1-12 columns. Accepts all props of native html div element.

Latest version **1.0.2** (published 2023-08-08) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @teambit/base-ui.layout.grid-component
pnpm add @teambit/base-ui.layout.grid-component
yarn add @teambit/base-ui.layout.grid-component
bun add @teambit/base-ui.layout.grid-component
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-08-08 |
| First published | 2020-07-23 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 21.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | teambit-owner, shohamgilad, davidfirst, lalybar, ranm8, odedre, guysaar, itaymendel, erezbit, giteden, joshk2, redigma, yona007, jonisar, benjgil, ocombe |

## Links

- npm: https://www.npmjs.com/package/@teambit/base-ui.layout.grid-component
- Homepage: https://bit.cloud/teambit/base-ui/layout/grid-component
- npm.io page: https://npm.io/package/@teambit/base-ui.layout.grid-component

## Dependencies (3)

- [core-js](https://npm.io/package/core-js.md) ^3.0.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@teambit/base-ui.layout.breakpoints](https://npm.io/package/@teambit/base-ui.layout.breakpoints.md) 1.0.0

## Recent versions

- 1.0.2 (latest) — 2023-08-08
- 1.0.1 — 2021-08-26
- 1.0.0 — 2021-06-15
- 0.6.11 — 2021-05-11
- 0.6.10 — 2021-04-29
- 0.6.9 — 2021-04-28
- 0.6.8 — 2021-04-08
- 0.6.7 — 2021-02-22
- 0.6.6 — 2021-02-22
- 0.6.5 — 2021-02-21
- 0.6.3 — 2021-02-02
- 0.6.2 — 2021-01-03
- 0.6.0 — 2020-12-29
- 0.5.9 — 2020-12-18
- 0.5.8 — 2020-12-18
- … 19 more at https://npm.io/package/@teambit/base-ui.layout.grid-component/versions

## README

## Grid Component

Basic grid element for 1-12 columns.
Accepts all props of native html div element.

```tsx
import { grid } from '@bit/bit.base-ui.layout.grid-component';

//...

<Grid col={2}>
	<div>column 1</div>
	<div>column 2</div>
</Grid>;
```

It has built in responsive support, using it's `colX` props:

```tsx
//single column by default, 2 columns for large screens:
<Grid col={1} colL={2}>
	<div>column 1</div>
	<div>column 2</div>
</Grid>
```

### breakpoints:

-   col `(all)`
-   colXs `360px`
-   colSm `480px`
-   colMd `768px`
-   colL `920px`
-   colLg `1080px`
-   colXl `1440px`

---
_Source: https://npm.io/package/@teambit/base-ui.layout.grid-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._