Container query grid system
npm install container-query-grid-systemContainer query grid system allow you to have breakpoints not from the viewport but from the size of the container
``
npm install --save container-query-grid-system
Or
`
yarn add container-query-grid-system
Add the script tag in your template
`
Create you own custom breakpoint and classes to apply to the container
`
React
`
import React, { Component } from 'react';
import { Container, Row, Col } from 'container-query-grid-system';
export default class App extends Component {
render() {
return (
)
}
}
`
Css
A css grid system is already in the project but you can create your own.
`
@import "container-query-grid-system";
Col Classes
| Class | Description | Type |
|---|---|---|
| xs | Define the number of column for the x-small breakpoint | Number |
| sm | Define the number of column for the small breakpoint | Number |
| md | Define the number of column for the medium breakpoint | Number |
| lg | Define the number of column for the large breakpoint | Number |
| xl | Define the number of column for the x-large breakpoint | Number |
`
import React, { Component } from 'react';
import { Container, Row, Col, Hidden } from 'container-query-grid-system';
export default class App extends Component {
render() {
return (
)
}
}
`
Classes
| Attribute | Description | Class |
|---|---|---|
| smDisplayBlock | Display a element on the small breakpoint | d-sm-block |
| mdDisplayBlock | Display a element on the medium breakpoint | d-md-block |
| lgDisplayBlock | Display a element on the large breakpoint | d-lg-block |
| xlDisplayBlock | Display a element on the x-large breakpoint | d-xl-block |
| smDisplayNone | Hide a element on the small breakpoint | d-sm-none |
| mdDisplayNone | Hide a element on the medium breakpoint | d-md-none |
| lgDisplayNone | Hide a element on the large breakpoint | d-lg-none |
| xlDisplayNone | Hide a element on the x-large breakpoint | d-xl-none |
| displayBlock | Display a element | d-block |
| displayNone | Hide a element | d-none |
Build for dev
`
yarn dev
Open index.html inside dist folder
Build for production
`
yarn build
Test
`
yarn test