Porsche Design System

Grid

Table of Contents

Area
Division

The Porsche Design System SCSS styles include the custom @mixin pds-grid() and multiple variables, which together form a generic layout system called the "Porsche Grid". This system ensures consistent content placement and alignment across multiple Porsche applications.

The Porsche Grid is based on native CSS Grid, changing its available columns on mobile (6 content columns + 2 safe zone columns) and desktop view >= 760px viewport width (8-narrow/12-basic/14-extended/16-wide content columns + 2 safe zone columns). It has a size range between 320px and 2560px, using fluid sized columns and gaps.

The Porsche Grid must be applied once at the top level, span the full viewport width, and cannot be nested.

Styles import: @use '@porsche-design-system/components-{js|angular|react|vue}/scss' as *;

Area#

@include pds-grid; defines a new instance of the Porsche Grid. Although content placement is flexible across any CSS grid column, predefined areas full, wide, extended, basic and narrow are provided for consistency. Apply the mixin @include pds-grid; to your wrapper element and use the SCSS variables to assign the desired area to your content elements.

@include pds-grid;

grid-column: $pds-grid-full-column-start / $pds-grid-full-column-end;

grid-column: $pds-grid-wide-column-start / $pds-grid-wide-column-end;

grid-column: $pds-grid-extended-column-start / $pds-grid-extended-column-end;

grid-column: $pds-grid-basic-column-start / $pds-grid-basic-column-end;

grid-column: $pds-grid-basic-narrow-start / $pds-grid-narrow-column-end;

Division#

Predefined areas can inherit the Porsche Grid using CSS subgrid, enabling layout divisions such as one-half, one-third (basic area only) and two-thirds (basic area only). When page sections share one alignment system, include pds-grid once on the page root and make the full-width sections subgrids. This avoids repeating the mixin and keeps all sections aligned; section-level grid instances remain valid for independent grids.

@include pds-grid;

grid-column: $pds-grid-extended-column-start / $pds-grid-extended-span-one-half;

grid-column: $pds-grid-extended-span-one-half / $pds-grid-extended-column-end;

grid-column: $pds-grid-basic-column-start / $pds-grid-basic-span-one-half;

grid-column: $pds-grid-basic-span-one-half / $pds-grid-basic-column-end;

grid-column: $pds-grid-basic-column-start / $pds-grid-basic-span-one-third;

grid-column: $pds-grid-basic-span-one-third;

grid-column: $pds-grid-basic-span-one-third / $pds-grid-basic-column-end;

grid-column: $pds-grid-basic-column-start / $pds-grid-basic-span-two-thirds;

grid-column: $pds-grid-basic-span-one-third / $pds-grid-basic-column-end;

grid-column: $pds-grid-basic-column-start / $pds-grid-basic-span-one-third;

grid-column: $pds-grid-basic-span-two-thirds / $pds-grid-basic-column-end;

grid-column: $pds-grid-narrow-column-start / $pds-grid-narrow-span-one-half;

grid-column: $pds-grid-narrow-span-one-half / $pds-grid-narrow-column-end;