Porsche Design System

Grid 🚫

The p-grid provides a visual structuring system for a homogeneous and balanced content placement across all Porsche web experiences and screen sizes. The Porsche Design System grid system is based upon a standard 12 column responsive grid. Its main purpose is to provide a solid and flexible grid system for defining layout areas and page structures. It is not meant to function as a toolkit for layout content blocks or components.

This component is deprecated and will be removed with the next major release. In general, please use native CSS Grid instead for better performance and more standardized layout technique. Additionally, we provide a Porsche Grid utility instead based on CSS Grid covering the specific layout needs for a harmonic appearance across all digital touch-points.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<div class="grid gap-static-md">
  <p-grid>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="12">
      12
    </p-grid-item>
  </p-grid>
  <p-grid>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="1">
      1
    </p-grid-item>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="11">
      11
    </p-grid-item>
  </p-grid>
  <p-grid>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="2">
      2
    </p-grid-item>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="10">
      10
    </p-grid-item>
  </p-grid>
  <p-grid>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="3">
      3
    </p-grid-item>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="9">
      9
    </p-grid-item>
  </p-grid>
  <p-grid>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="4">
      4
    </p-grid-item>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="8">
      8
    </p-grid-item>
  </p-grid>
  <p-grid>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="5">
      5
    </p-grid-item>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="7">
      7
    </p-grid-item>
  </p-grid>
  <p-grid>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="6">
      6
    </p-grid-item>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="6">
      6
    </p-grid-item>
  </p-grid>
  <p-grid>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="7">
      7
    </p-grid-item>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="5">
      5
    </p-grid-item>
  </p-grid>
  <p-grid>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="8">
      8
    </p-grid-item>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="4">
      4
    </p-grid-item>
  </p-grid>
  <p-grid>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="9">
      9
    </p-grid-item>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="3">
      3
    </p-grid-item>
  </p-grid>
  <p-grid>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="10">
      10
    </p-grid-item>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="2">
      2
    </p-grid-item>
  </p-grid>
  <p-grid>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="11">
      11
    </p-grid-item>
    <p-grid-item class="bg-info-soft text-center prose-text-sm bg-clip-content" size="1">
      1
    </p-grid-item>
  </p-grid>
</div>
<script>

</script>
</body>
</html>

Deprecation hint