# Custom Grid SCSS This module provides a customized grid with the ability to expand functionality for different resolutions with a different number of columns. To do this, you need to configure only one scss $grid object and all styles will be rebuilt to fit the required parameters. # Installation and configuration Install *grid.scss* *`npm i custom-grid-scss --save`* For quick work with grid scss you need to import *settings_base.scss* and *grid.scss* file to your main scss file. ```scss @import '../../../node_modules/custom-grid-scss/settings_base'; @import '../../../node_modules/custom-grid-scss/grid'; ``` After connecting scss files, you can use grid. The basic grid settings are as follows. *settings_base.scss* ```scss $grid: ( 'column-color': rgba(255, 0, 0, 0.1), // column color 'base': ( 'container': ( // container settings 'width': 1920px, // max-width container 'padding': ( 'x': 16px, 'y': 0px, ), ), 'column': ( 'width': ( 'min': 0px, // min width column 'max': 1fr, // max width column ), 'gap': 32px, // column gap 'count': 12, // count column ), ), 'media': ( 'breakpoint': ( // your number of breakpoints 'xl', 'lg', 'md', 'sm', ), 'xl': ( 'max-width': 1200px, // max-width breakpoint 'container': ( 'width': 1920px, // max-width container 'padding': ( 'x': 16px, 'y': 0px, ), ), 'column': ( 'width': ( 'min': 0px, // min width column 'max': 1fr, // max width column ), 'gap': 32px, // column gap 'count': 12, // count column ), ), ... ); ``` But if you don't want to use a standard grid. Then you can create your own scss $grid object and reassign it to the values you need. You can also add more backpoints, but each new added breakpoint needs to be added to the `$grid - media - breakpoint` and set your own parameters for it as shown in the standard grid. ## How to use To work with a grid, you need to create a grid container `
...
`. Then inside you use `
...
` and inside it you can also split content using `
...
`. ### grid container There are two types of containers, they are `grid-container` and `grid-container-fluid`. ### grid-row We use `
` to divide content into conditional lines in the template or into blocks as you prefer. With `
`, you can also use an additional class full `
`, and then the line will always occupy all columns, or you can explicitly indicate how many columns the line will occupy and at what resolution this number will change `
`. ### сol Use `
` inside. Specify how much column `
` will take. ### оffset Use `
` inside. Specify how many columns need to be indented ``. *Example:* ```html

First block

Two block

Trhee block

``` ## Grid background There are two options for displaying the grid. The first is by adding a class to the tag body. (Only works fine if you are using a `grid-container` with side padding). ```html
...
``` The second is by adding *grid-bg* or *grid-bg-fluid* at the beginning of the body tag with the maximum number of your specified columns. ```html
// or grid-bg-fluid ... // If you have a maximum number of columns of 12, then there should be 12 elements.
``` As a result, we will get such a grid. ![grid-bg-fluid.png](https://i.stack.imgur.com/0F3fK.png)