Grids

In Malty, the grid acts similarly to the print layout in organizing the elements on the page. Grids provide a guide to creating multiple responsive layouts.

 

Types of grids

Fluid grid

The fluid grid is designed for complex screens and web applications as it uses 100% of the screen’s width. The large and high-definition fluid grids allow for maximum use of screen real estate and are best used for application workflows and UI.

 

Fixed grid

The fixed grid has a maximum width and is designed for simple screens and content-specific pages. The width allows for maximum readability of page content on large and high-definition screens.

 

Anatomy of a grid

Margins

Grid margins are the outer margins of the grid. They can be the same width as the gutters or greater.

Columns

There are 6 and 12 columns in the responsive grid system. Column settings change based on breakpoints

Gutters

Gutters are the gaps between the columns. Gutter widths are fixed values (16 px, 24 px and 32px) based on breakpoints.