Grids & Layout

Grid

The Baseline Grid

The Baseline grid is made of an 8px unit. Thus all spacing, gaps and sizes of enclosures, etc, may follow dimensions that are multiples of 4.

baseline
baseline

Layout Grid

This design system uses a fluid 12 Column layout grid which is to enable modularity and easy scaling for other device screen sizes. It has fixed margin and gutter values which vary for break point ranges.

The margin is defined for either sides (left and right) as a fixed value of the space between the edge of the screen and the content, preventing the field elements from overflowing and/ or getting hidden beyond the screen edge.

Grid Layout

Gutters ensure uniform spacing between field elements on the layout. These are also defined for breakpoint ranges to ensure the density of the content can be balanced on varying screen sizes consistently.

Grid Layout

Columns serve as references for laying out the field elements. In this system, the columns do not have a fixed width and vary for different screen sizes.

1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12

							

								

									
Col-1

								

								

									
Col-1

								

								

									
Col-1

								

								

									
Col-1

								

								

									
Col-1

								

								

									
Col-1

								

								

									
Col-1

								

								

									
Col-1

								

								

									
Col-1

								

								

									
Col-1

								

								

									
Col-1

								

								

									
Col-1

Other Devices

The diagrams above show margins, gutters and columns as components of the layout grid and specify values for desktop screens, the following diagrams show grid layouts variations for Tablets and Mobile devices. The values for the Margin and gutters have been defined with the intention of ensuring maximum live area and for an optimum proportion of spacing.

tablet view
mobile view

For Tablets in particular, the offset layout has been kept in mind to accommodate paragraphs with an average word count of 12 words per line, across 8 columns aligned centrally. (Font size 14px) The margins and gutter spaces have thus been thus defined to maximize the area for field elements in this type of layout comfortably.

For the Mobile view margins have been defined in proportion to maintain a consistent viewing experience optimizing active area for field items.

Margins & Padding Classes

Margins ensure that the content does not spill beyond the screen and follow an alignment from where they start on the screen and till where they may occupy space on any size of the screen within the layout. The size of the margin may be decided based on need and is followed in all sizes of layouts in the same proportion.

Margin padding

6px, 10px, 14px, 18px, 24px, 28px, 40px and 64px are some new values added to the padding set as their requirement was felt while building components within the 4px grid system. These values were added later as the design expanded. They have been given a different alphabet value for standardization.

Developer Note

Grid Layout offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Grid system follows 12 column grid across all the devices based on bootstrap grid system.

Grid annotation being described is 12, 8, 4 column grids for desktop, tablet, mobile respectively which describes how much number of elements will be stacked in a single row across all sizes. suppose, we have several card elements to be placed in a row. so maximum 3 cards will be stacked in a row for laptop size, 2 cards for tablet and 1 card for mobile size screen taking 4 column grids each.