grid-component
v1.0.11arrow_drop_downv1.0.11
v1.0.10
v1.0.9
v1.0.8
v1.0.7
v1.0.6
v1.0.5
v1.0.4
v1.0.3
v1.0.2
v1.0.1
v1.0.0
STATUS
Passing
DOWNLOADS
5,333
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
4 years ago
SIZE
4 KB
A responsive css-grid wrapper.
1 contributor
Like
Install grid-component as a package?
Copied
npm i @bit/bit.base-ui.layout.grid-component
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
Component Example 
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just any of the 1 million components
and packages in Bit or NPM to the example.toggle layout
modifieddraft
No preview available
chevron_left
chevron_right
Grid Component
Basic grid element for 1-12 columns. Accepts all props of native html div element.
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:
//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
Properties
| Name | Type | Description |
|---|---|---|
col | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | default column count (1-12) |
colXs | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | column count at extremely small devices |
colSm | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | column count at mobile screens |
colMd | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | column count at medium devices |
colL | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | column count at tablets |
colLg | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | default column count at laptops |
colXl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | default column count at desktop |