Grid Table of Contents

• SCSS Mixins
• SCSS Variables

SCSS Mixins# SCSS MixinsDescription@mixin pds-grid()Applies the Porsche Grid layout system (must be applied once at the top level, span the full viewport width, and cannot be nested). SCSS Variables# SCSS VariableDescriptionValue$pds-grid-gapHolds the grid gap the Porsche Grid.clamp(16px, 1.25vw + 12px, 36px)$pds-grid-narrow-column-startHolds the start position of the narrow area within the Porsche Grid.narrow-start$pds-grid-narrow-column-endHolds the end position of the narrow area within the Porsche Grid.narrow-end$pds-grid-narrow-span-one-halfHolds a one third span within the narrow area of the Porsche Grid.var(--pds-grid-narrow-span-one-half)$pds-grid-narrow-offset-baseHolds a base offset within the narrow area of the Porsche Grid.max(22px, 10.625vw - 12px)$pds-grid-narrow-offset-sHolds a small offset within the narrow area of the Porsche Grid.calc(calc(5vw - 16px) + (clamp(16px, 1.25vw + 12px, 36px) + calc((100vw - calc(5vw - 16px) * 2 - clamp(16px, 1.25vw + 12px, 36px) * 15) / 16)) * 4)$pds-grid-narrow-offset-xxlHolds a xxl offset within the narrow area of the Porsche Grid.calc(max(0px, 50vw - 2560px / 2) + min(50vw - 880px, 400px) + (clamp(16px, 1.25vw + 12px, 36px) + calc((min(100vw, 2560px) - min(50vw - 880px, 400px) * 2 - clamp(16px, 1.25vw + 12px, 36px) * 15) / 16)) * 4)$pds-grid-basic-column-startHolds the start position of the basic area within the Porsche Grid.basic-start$pds-grid-basic-column-endHolds the end position of the basic area within the Porsche Grid.basic-end$pds-grid-basic-span-one-halfHolds a half span within the basic area of the Porsche Grid.var(--pds-grid-basic-span-one-half)$pds-grid-basic-span-one-thirdHolds a one third span within the basic area of the Porsche Grid.var(--pds-grid-basic-span-one-third)$pds-grid-basic-span-two-thirdsHolds a two thirds span within the basic area of the Porsche Grid.var(--pds-grid-basic-span-two-thirds)$pds-grid-basic-offset-baseHolds a base offset within the base area of the Porsche Grid.max(22px, 10.625vw - 12px)$pds-grid-basic-offset-sHolds a small offset within the base area of the Porsche Grid.calc(calc(5vw - 16px) + (clamp(16px, 1.25vw + 12px, 36px) + calc((100vw - calc(5vw - 16px) * 2 - clamp(16px, 1.25vw + 12px, 36px) * 15) / 16)) * 2)$pds-grid-basic-offset-xxlHolds a xxl offset within the base area of the Porsche Grid.calc(max(0px, 50vw - 2560px / 2) + min(50vw - 880px, 400px) + (clamp(16px, 1.25vw + 12px, 36px) + calc((min(100vw, 2560px) - min(50vw - 880px, 400px) * 2 - clamp(16px, 1.25vw + 12px, 36px) * 15) / 16)) * 2)$pds-grid-extended-column-startHolds the start position of the extended area within the Porsche Grid.extended-start$pds-grid-extended-column-endHolds the end position of the extended area within the Porsche Grid.extended-end$pds-grid-extended-span-one-halfHolds a half span within the extended area of the Porsche Grid.var(--pds-grid-extended-span-one-half)$pds-grid-extended-offset-baseHolds a base offset within the extended area of the Porsche Grid.max(22px, 10.625vw - 12px)$pds-grid-extended-offset-sHolds a small offset within the extended area of the Porsche Grid.calc(calc(5vw - 16px) + (clamp(16px, 1.25vw + 12px, 36px) + calc((100vw - calc(5vw - 16px) * 2 - clamp(16px, 1.25vw + 12px, 36px) * 15) / 16)) * 1)$pds-grid-extended-offset-xxlHolds a xxl offset within the extended area of the Porsche Grid.calc(max(0px, 50vw - 2560px / 2) + min(50vw - 880px, 400px) + (clamp(16px, 1.25vw + 12px, 36px) + calc((min(100vw, 2560px) - min(50vw - 880px, 400px) * 2 - clamp(16px, 1.25vw + 12px, 36px) * 15) / 16)) * 1)$pds-grid-wide-column-startHolds the start position of the wide area within the Porsche Grid.wide-start$pds-grid-wide-column-endHolds the end position of the wide area within the Porsche Grid.wide-end$pds-grid-wide-offset-baseHolds a base offset within the wide area of the Porsche Grid.max(22px, 10.625vw - 12px)$pds-grid-wide-offset-sHolds a small offset within the wide area of the Porsche Grid.calc(5vw - 16px)$pds-grid-wide-offset-xxlHolds a xxl offset within the wide area of the Porsche Grid.calc(max(0px, 50vw - 2560px / 2) + min(50vw - 880px, 400px))$pds-grid-full-column-startHolds the start position of the full area within the Porsche Grid.full-start$pds-grid-full-column-endHolds the end position of the full area within the Porsche Grid.full-end$pds-grid-full-offsetHolds a full offset within the full area of the Porsche Grid.max(0px, 50vw - 2560px / 2)