Grids

Specific Templates grids have been set up on the project :

grid-5-7

this grid is set to seperate titles and content giving ryhtme to a page on markiting content pages mostly its initial purpose is for the isolation1euro website

grid-autofit

this grid is set to display a list of cards on a responsive area that can change width cards will keep a min width (20rem = 320px) a of a mobile width and a maximum width set to optimize content discovery when cards width gets hover max-width, the grids adapt to a larger number of cols to optimize space usage. -variations will adjust the min-width of the grid items

• .max-10 : min item width 160px
• .max-15 : min item width 240px
• .max-25 : min item width 400px
• .max-30 : min item width 480px
• .max-40 : min item width 640px
• .gap2x : ddouble the gridd gap

grid-flex

this grid is set to allow usage of multiple width within a same flex grid on multiple lines if necessary. it is set with a mobile first approch and adaptable on desktop with additionnal class

• set a .item to support generic margins
• set a width : item-25 / item-33 / item-50 / item-66 / item-75 / item-100
• on a desktop with if requuested : item-desktop-25 / item-desktop-33 / item-desktop-50 / item-desktop-66 / item-desktop-75 / item-desktop-100

With-sidebar

this grid is set to allow usage of a sidebar on a template page

Dashboard

this grid is set to allow multiple cards tolive alongside eachotther on a readable content with focus given on some cards mostly usefull for user accounts pages This grid is a 1 to 3 column based grid (mobile > Desktop)

Most components have their own grid that is specific to their content architecture.

For a more versitle usage, we added grids in the helpers that are not currently used but can be helpfull on given content presentation needs:

inline-flex

This grid will display items horizontally with no responsive adjustments and no auto rows.

inline-grid + .cols-x

This grid will display items horizontally with a pre defined number of items per row