Custom-grid-scss NPM

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.

@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

$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 <div class="grid-container-fluid">...</div>. Then inside you use <div class="grid-row full">...</div> and inside it you can also split content using <div class="col-4 col-sm-1">...</div>.

grid container

There are two types of containers, they are grid-container and grid-container-fluid.

grid-row

We use <div class="grid-row"></div> to divide content into conditional lines in the template or into blocks as you prefer. With <div class="grid-row"></div>, you can also use an additional class full <div class="grid-row full"></div>, 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 <div class="grid-row col-6 col-md-4 col-sm-2"></div>.

сol

Use <div class="grid-row"></div> inside. Specify how much column <div class="col-<breakpoint>-<number>"></div> will take.

оffset

Use <div class="grid-row"></div> inside. Specify how many columns need to be indented <span class="offset-<breakpoint>-<number>"></span>.

Example:

<div class="grid-container-fluid">
  <header class="grid-row full">
    <a href="#" class="logo col-2 col-sm-1"> GRID </a>
    <span class="offset-6 offset-lg-2 offset-md-none"></span>
    <div class="menu col-4 col-sm-none">
      <nav>
        <li><a href="#">Main</a></li>
        <li><a href="#">Grid row</a></li>
        <li><a href="#">Grid column</a></li>
      </nav>
    </div>
  </header>

  <div class="cards grid-row full">
    <div class="col-4"><p>First block</p></div>
    <div class="col-4"><p>Two block</p></div>
    <div class="col-4"><p>Trhee block</p></div>
  </div>

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).

<body class="grid-bg-before">
  <div class="grid-container">
    ...
  </div>
</body>

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.

<div class="grid-bg"> // or grid-bg-fluid
 <span class="col"></span>
 ... // If you have a maximum number of columns of 12, then there should be 12 elements.
 <span class="col"></span>
</div>

As a result, we will get such a grid.