Porsche Design System

Grid

Classes#

Tailwind @utility CSS class

Description

.grid-template

Applies the Porsche Grid layout system (must be applied once at the top level, span the full viewport width, and cannot be nested).

.col-full

Applies the start/end position of the full area within the Porsche Grid.

.col-start-full

Applies the start position of the full area within the Porsche Grid.

.col-end-full

Applies the end position of the full area within the Porsche Grid.

.col-wide

Applies the start/end position of the wide area within the Porsche Grid.

.col-start-wide

Applies the start position of the wide area within the Porsche Grid.

.col-end-wide

Applies the end position of the wide area within the Porsche Grid.

.col-extended

Applies the start/end position of the extended area within the Porsche Grid.

.col-start-extended

Applies the start position of the extended area within the Porsche Grid.

.col-end-extended

Applies the end position of the extended area within the Porsche Grid.

.col-basic

Applies the start/end position of the basic area within the Porsche Grid.

.col-start-basic

Applies the start position of the basic area within the Porsche Grid.

.col-end-basic

Applies the end position of the basic area within the Porsche Grid.

.col-narrow

Applies the start/end position of the narrow area within the Porsche Grid.

.col-start-narrow

Applies the start position of the narrow area within the Porsche Grid.

.col-end-narrow

Applies the end position of the narrow area within the Porsche Grid.

.col-span-one-half

Applies a half span within the wide, extended, basic or narrow area of the Porsche Grid.

.col-span-one-third

Applies a one third span within the basic area of the Porsche Grid.

.col-span-two-thirds

Applies a two thirds span within the basic area of the Porsche Grid.