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

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

Usage no npm install needed!

<script type="module">
  import teambitBaseUiLayoutGridComponent from 'https://cdn.skypack.dev/@teambit/base-ui.layout.grid-component';
</script>

README

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