container-query-grid-system

Container query grid system allow you to have breakpoints not from the viewport but from the size of the container

Install

npm install --save container-query-grid-system

Or

yarn add container-query-grid-system

Add the script tag in your template

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/container-breakpoint.js"></script>

Breakpoint

Create you own custom breakpoint and classes to apply to the container

<script>
	window.breakpointMap = [
	{
		class: "container-xs",
		breakpoint: 0
	},
	{
		class: "container-sm",
		breakpoint: 524
	},
	{
		class: "container-md",
		breakpoint: 920
	},
	{
		class: "container-lg",
		breakpoint: 1160
	},
	{
		class: "container-xl",
		breakpoint: 1560
	}
	];
</script>

Example

React

import React, { Component } from 'react';
import { Container, Row, Col } from 'container-query-grid-system';

export default class App extends Component {
    render() {
        return (
            <Container>
                <Row>
                    <Col xs={12} md={3}>Sidebar</Col>
                    <Col xs={12} md={9}>Main Section</Col>
                </Row>
            </Container>
        )
    }
}

Css

A css grid system is already in the project but you can create your own.

@import "container-query-grid-system";

Col Classes

Hidden

import React, { Component } from 'react';
import { Container, Row, Col, Hidden } from 'container-query-grid-system';

export default class App extends Component {
    render() {
        return (
            <Container>
                <Row>
                    <Col xs={12} md={3}>
                        <Hidden smDisplayBlock>Sidebar</Hidden>
                    </Col>
                </Row>
            </Container>
        )
    }
}

Classes

Build

Build for dev

yarn dev

Open index.html inside dist folder

Build for production

yarn build

Test

yarn test