Grids

PAM comes with 1ths to 5ths and 24ths based grid and to wield the grids power there are some concepts to keep in mind. PAM Grid consist of two types of attribute selectors: pam-Grid and pam-Unit. All child elements of a grid must be units. Child elements contained within an grid element must be a grid unit. All content which is visible needs to be contained inside a grid unit.

To control adaptive grids, use the default breakpoints with their correspinding attribute selector pam-Unit="[breakpointKey]:[size]". For more details on how to use, have a look at the adaptive grids section.

Key Attribute Applies Media Query
none pam-Unit="[size]" Always None
small pam-Unit="small:[size]" ≥ 480px @media screen and (min-width: 480px)
medium pam-Unit="medium:[size]" ≥ 768px @media screen and (min-width: 768px)
large pam-Unit="large:[size]" ≥ 1024px @media screen and (min-width: 960px)
xlarge pam-Unit="xlarge:[size]" ≥ 1280px @media screen and (min-width: 1200px)