Responsive layout - pixel-grid/pixelgrid GitHub Wiki

It is possible to show/hide the grids for a particular window size. To achieve that, use mediaQuery property to add media query when defining grid settings:

import {
    IColumnsCenterGrid,
    IColumnsStretchGrid,
    initializeGrid
} from '@sergeyzwezdin/pixelgrid';

// Will be displayed only for more than 120em
const xlgPreset = {
    grids: [
        {
            type: 'columns-center',
            color: '#03A9F4',
            opacity: 0.25,
            count: 12,
            gutter: 32,
            width: 92
        } as IColumnsCenterGrid
    ],
    mediaQuery: '(min-width: 120em)'
};

// Will be displayed only for 89em - 120em
const lgPreset = {
    grids: [
        {
            type: 'columns-center',
            color: '#2196F3',
            opacity: 0.25,
            count: 12,
            gutter: 32,
            width: 82
        } as IColumnsCenterGrid
    ],
    mediaQuery: '(min-width: 89em) and (max-width: 119.99em)'
};

// Will be displayed only for 84em - 89em
const mdPreset = {
    grids: [
        {
            type: 'columns-stretch',
            color: '#3F51B5',
            opacity: 0.25,
            count: 12,
            gutter: 16,
            margin: 16
        } as IColumnsStretchGrid
    ],
    mediaQuery: '(min-width: 84em) and (max-width: 88.99em)'
};

initializeGrid([xlgPreset, lgPreset, mdPreset]);