indian flagGovernment of India
|
GitHub GitHub

Powered by NeGD | MeitY Government of India® UX4G

Gutters

In the UX4G grid system, gutters are the padding between the columns that is utilized to responsively space and align content.

How they work #

  • Gutters, which are produced by horizontal padding, are gaps between the content of columns. To align the content, we set padding-right and padding-left on each column and use negative margin to offset those values at the beginning and end of each row.

  • Gutters begin at a width of 1.5 rem (24 px). This enables us to adjust our grid to fit the scale of the padding and margin spacers space.

  • Gutters are adaptable and sensitive. To change all gutters, including horizontal and vertical gutters, use gutter classes that are particular to a breakpoint.

Horizontal gutters #

It is possible to regulate the horizontal gutter widths using the .gx-* classes. If larger gutters are utilized as well, the .container or .container-fluid parent may need to be modified using a corresponding padding utility to prevent unwanted overflow. For instance, raised the padding with .px-4 in the sample below:

RESULT
Custom column padding
Custom column padding

An alternative solution is to add a wrapper around the .row with the .overflow-hidden class:

RESULT
Custom column padding
Custom column padding

Vertical gutters #

The vertical gutter widths can be adjusted with the use of .gy-* classes. The vertical gutters, like the horizontal gutters, have the potential to produce some overflow beneath the .row at the end of a page. If this happens, put a wrapper with the .overflow-hidden class around the .row:

RESULT
Custom column padding
Custom column padding
Custom column padding
Custom column padding

Horizontal & vertical gutters #

The horizontal gutter widths can be controlled using the .g-* classes; however, for the following example, we utilize a lower gutter width, eliminating the requirement for the .overflow-hidden wrapper class.

RESULT
Custom column padding
Custom column padding
Custom column padding
Custom column padding

Row columns gutters #

Row columns can also get gutter classes added. The responsive row columns and responsive gutter classes are used in the example below.

RESULT
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column

No gutters #

With .g-0, users can get rid of the gutters between the columns in our predefined grid classes. This gets rid of the negative margins in .row and the horizontal padding in any columns that are its immediate descendants.

Need edge-to-edge design? To avoid overflow, remove the parent .container or .container-fluid and add .mx-0 to the .row.

In actuality, it appears as follows. Use this with all other predefined grid classes as well, such as column widths, responsive tiers, reorders, and others.

RESULT
.col-sm-6 .col-md-8
.col-6 .col-md-4

Change the gutters #

Classes are built from the $gutters Sass map which is inherited from the $spacers Sass map.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);