“Grid” Design Component
The IxDF Design System grid system provides a structure for consistent page layouts, as well as for optimizing how content is displayed on different viewport sizes. The responsive grid system is fluid on small to medium viewport sizes and fixed on large sizes.
|Name||Viewport size range|
|Small||767px and below|
|Medium||768px to 1055px|
|Large||1056px and above|
Grid on Small Viewport
For small viewports (767px and below), the grid takes the whole screen minus the fixed 16px margins on both sides of the column.
Grid on Medium Viewport
Medium viewports between 768px and 1055px have a flexible 12-column grid. The grid is based on fixed-width gutters and margins, and flexible-width columns. Margins are fixed at 16px, gutters are fixed at 24px and columns take up the remaining space.
Grid on Large Viewport
On large viewports (1056px and above), the IxDF Design System uses a fixed grid system. Columns are fixed at 56px, gutters are fixed at 32px and margins take up the remaining space.
To be able to use grid spacing as defined above we have created 2 classes that can be combined to achieve the required functionality.
<div class="gridContainer"> <div class="gridContent">Actual Page Content</div> </div>
To use the 12 column grid, just add the grid row and columns to the grid content.
<div class="gridContainer"> <div class="gridContent"> <div class="row"> <div class="col-md-4"> 4 Column wide content </div> <div class="col-md-4"> 4 Column wide content </div> <div class="col-md-4"> 4 Column wide content </div> </div> </div> </div>