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.