OTTODesign System

Code

Grid

Storybook group: Fragments · Sidebar path: Fragments/Layout and spacing/Grid · Extracted 28.09.2026

Overview

Source: ./src/fragments/grid/Grid.mdx

Grid helper classes

The grid helper classes offer a flexible way to arrange content in a 12-column grid layout.

Info

See the Grid UX documentation for detailed design guidelines.

Skip to:

Basic usage

Set the oc-grid class on a container element to create a grid layout with 12 columns:

Default

Story: fragments-layout-and-spacing-grid--default · tags: 

<div class="oc-grid">
  <oc-placeholder-v1>1</oc-placeholder-v1>
  <oc-placeholder-v1>2</oc-placeholder-v1>
  <oc-placeholder-v1>3</oc-placeholder-v1>
  <oc-placeholder-v1>4</oc-placeholder-v1>
  <oc-placeholder-v1>5</oc-placeholder-v1>
  <oc-placeholder-v1>6</oc-placeholder-v1>
  <oc-placeholder-v1>7</oc-placeholder-v1>
  <oc-placeholder-v1>8</oc-placeholder-v1>
  <oc-placeholder-v1>9</oc-placeholder-v1>
  <oc-placeholder-v1>10</oc-placeholder-v1>
  <oc-placeholder-v1>11</oc-placeholder-v1>
  <oc-placeholder-v1>12</oc-placeholder-v1>
  <oc-placeholder-v1>13</oc-placeholder-v1>
  <oc-placeholder-v1>14</oc-placeholder-v1>
  <oc-placeholder-v1>15</oc-placeholder-v1>
  <oc-placeholder-v1>16</oc-placeholder-v1>
  <oc-placeholder-v1>17</oc-placeholder-v1>
  <oc-placeholder-v1>18</oc-placeholder-v1>
  <oc-placeholder-v1>19</oc-placeholder-v1>
  <oc-placeholder-v1>20</oc-placeholder-v1>
  <oc-placeholder-v1>21</oc-placeholder-v1>
  <oc-placeholder-v1>22</oc-placeholder-v1>
  <oc-placeholder-v1>23</oc-placeholder-v1>
  <oc-placeholder-v1>24</oc-placeholder-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  render() {
    return html` <div class="oc-grid">
      <oc-placeholder-v1>1</oc-placeholder-v1>
      <oc-placeholder-v1>2</oc-placeholder-v1>
      <oc-placeholder-v1>3</oc-placeholder-v1>
      <oc-placeholder-v1>4</oc-placeholder-v1>
      <oc-placeholder-v1>5</oc-placeholder-v1>
      <oc-placeholder-v1>6</oc-placeholder-v1>
      <oc-placeholder-v1>7</oc-placeholder-v1>
      <oc-placeholder-v1>8</oc-placeholder-v1>
      <oc-placeholder-v1>9</oc-placeholder-v1>
      <oc-placeholder-v1>10</oc-placeholder-v1>
      <oc-placeholder-v1>11</oc-placeholder-v1>
      <oc-placeholder-v1>12</oc-placeholder-v1>
      <oc-placeholder-v1>13</oc-placeholder-v1>
      <oc-placeholder-v1>14</oc-placeholder-v1>
      <oc-placeholder-v1>15</oc-placeholder-v1>
      <oc-placeholder-v1>16</oc-placeholder-v1>
      <oc-placeholder-v1>17</oc-placeholder-v1>
      <oc-placeholder-v1>18</oc-placeholder-v1>
      <oc-placeholder-v1>19</oc-placeholder-v1>
      <oc-placeholder-v1>20</oc-placeholder-v1>
      <oc-placeholder-v1>21</oc-placeholder-v1>
      <oc-placeholder-v1>22</oc-placeholder-v1>
      <oc-placeholder-v1>23</oc-placeholder-v1>
      <oc-placeholder-v1>24</oc-placeholder-v1>
    </div>`;
  }
}

Presets

The grid helper classes oc-grid--content and oc-grid--page offer presets that add a default gap and margin to the grid.

Class oc-grid--content

The oc-grid--content class on a grid container element adds a default gap of 16px and a margin of 16px to the grid.

<div class="oc-grid oc-grid--content">...</div>

Preset: grid--content

Story: fragments-layout-and-spacing-grid--preset-grid-content · tags: 

<div class="oc-grid oc-grid--content">
  <oc-placeholder-v1>1</oc-placeholder-v1>
  <oc-placeholder-v1>2</oc-placeholder-v1>
  <oc-placeholder-v1>3</oc-placeholder-v1>
  <oc-placeholder-v1>4</oc-placeholder-v1>
  <oc-placeholder-v1>5</oc-placeholder-v1>
  <oc-placeholder-v1>6</oc-placeholder-v1>
  <oc-placeholder-v1>7</oc-placeholder-v1>
  <oc-placeholder-v1>8</oc-placeholder-v1>
  <oc-placeholder-v1>9</oc-placeholder-v1>
  <oc-placeholder-v1>10</oc-placeholder-v1>
  <oc-placeholder-v1>11</oc-placeholder-v1>
  <oc-placeholder-v1>12</oc-placeholder-v1>
  <oc-placeholder-v1>13</oc-placeholder-v1>
  <oc-placeholder-v1>14</oc-placeholder-v1>
  <oc-placeholder-v1>15</oc-placeholder-v1>
  <oc-placeholder-v1>16</oc-placeholder-v1>
  <oc-placeholder-v1>17</oc-placeholder-v1>
  <oc-placeholder-v1>18</oc-placeholder-v1>
  <oc-placeholder-v1>19</oc-placeholder-v1>
  <oc-placeholder-v1>20</oc-placeholder-v1>
  <oc-placeholder-v1>21</oc-placeholder-v1>
  <oc-placeholder-v1>22</oc-placeholder-v1>
  <oc-placeholder-v1>23</oc-placeholder-v1>
  <oc-placeholder-v1>24</oc-placeholder-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Preset: grid--content",
  render() {
    return html` <div class="oc-grid oc-grid--content">
      <oc-placeholder-v1>1</oc-placeholder-v1>
      <oc-placeholder-v1>2</oc-placeholder-v1>
      <oc-placeholder-v1>3</oc-placeholder-v1>
      <oc-placeholder-v1>4</oc-placeholder-v1>
      <oc-placeholder-v1>5</oc-placeholder-v1>
      <oc-placeholder-v1>6</oc-placeholder-v1>
      <oc-placeholder-v1>7</oc-placeholder-v1>
      <oc-placeholder-v1>8</oc-placeholder-v1>
      <oc-placeholder-v1>9</oc-placeholder-v1>
      <oc-placeholder-v1>10</oc-placeholder-v1>
      <oc-placeholder-v1>11</oc-placeholder-v1>
      <oc-placeholder-v1>12</oc-placeholder-v1>
      <oc-placeholder-v1>13</oc-placeholder-v1>
      <oc-placeholder-v1>14</oc-placeholder-v1>
      <oc-placeholder-v1>15</oc-placeholder-v1>
      <oc-placeholder-v1>16</oc-placeholder-v1>
      <oc-placeholder-v1>17</oc-placeholder-v1>
      <oc-placeholder-v1>18</oc-placeholder-v1>
      <oc-placeholder-v1>19</oc-placeholder-v1>
      <oc-placeholder-v1>20</oc-placeholder-v1>
      <oc-placeholder-v1>21</oc-placeholder-v1>
      <oc-placeholder-v1>22</oc-placeholder-v1>
      <oc-placeholder-v1>23</oc-placeholder-v1>
      <oc-placeholder-v1>24</oc-placeholder-v1>
    </div>`;
  }
}
Class oc-grid--page

The oc-grid--page class on a grid container element adds a default gap of 4px and a margin of 0px to the grid.

<div class="oc-grid oc-grid--page">...</div>

Preset: grid--page

Story: fragments-layout-and-spacing-grid--preset-grid-page · tags: 

<div class="oc-grid oc-grid--page">
  <oc-placeholder-v1>1</oc-placeholder-v1>
  <oc-placeholder-v1>2</oc-placeholder-v1>
  <oc-placeholder-v1>3</oc-placeholder-v1>
  <oc-placeholder-v1>4</oc-placeholder-v1>
  <oc-placeholder-v1>5</oc-placeholder-v1>
  <oc-placeholder-v1>6</oc-placeholder-v1>
  <oc-placeholder-v1>7</oc-placeholder-v1>
  <oc-placeholder-v1>8</oc-placeholder-v1>
  <oc-placeholder-v1>9</oc-placeholder-v1>
  <oc-placeholder-v1>10</oc-placeholder-v1>
  <oc-placeholder-v1>11</oc-placeholder-v1>
  <oc-placeholder-v1>12</oc-placeholder-v1>
  <oc-placeholder-v1>13</oc-placeholder-v1>
  <oc-placeholder-v1>14</oc-placeholder-v1>
  <oc-placeholder-v1>15</oc-placeholder-v1>
  <oc-placeholder-v1>16</oc-placeholder-v1>
  <oc-placeholder-v1>17</oc-placeholder-v1>
  <oc-placeholder-v1>18</oc-placeholder-v1>
  <oc-placeholder-v1>19</oc-placeholder-v1>
  <oc-placeholder-v1>20</oc-placeholder-v1>
  <oc-placeholder-v1>21</oc-placeholder-v1>
  <oc-placeholder-v1>22</oc-placeholder-v1>
  <oc-placeholder-v1>23</oc-placeholder-v1>
  <oc-placeholder-v1>24</oc-placeholder-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Preset: grid--page",
  render() {
    return html` <div class="oc-grid oc-grid--page">
      <oc-placeholder-v1>1</oc-placeholder-v1>
      <oc-placeholder-v1>2</oc-placeholder-v1>
      <oc-placeholder-v1>3</oc-placeholder-v1>
      <oc-placeholder-v1>4</oc-placeholder-v1>
      <oc-placeholder-v1>5</oc-placeholder-v1>
      <oc-placeholder-v1>6</oc-placeholder-v1>
      <oc-placeholder-v1>7</oc-placeholder-v1>
      <oc-placeholder-v1>8</oc-placeholder-v1>
      <oc-placeholder-v1>9</oc-placeholder-v1>
      <oc-placeholder-v1>10</oc-placeholder-v1>
      <oc-placeholder-v1>11</oc-placeholder-v1>
      <oc-placeholder-v1>12</oc-placeholder-v1>
      <oc-placeholder-v1>13</oc-placeholder-v1>
      <oc-placeholder-v1>14</oc-placeholder-v1>
      <oc-placeholder-v1>15</oc-placeholder-v1>
      <oc-placeholder-v1>16</oc-placeholder-v1>
      <oc-placeholder-v1>17</oc-placeholder-v1>
      <oc-placeholder-v1>18</oc-placeholder-v1>
      <oc-placeholder-v1>19</oc-placeholder-v1>
      <oc-placeholder-v1>20</oc-placeholder-v1>
      <oc-placeholder-v1>21</oc-placeholder-v1>
      <oc-placeholder-v1>22</oc-placeholder-v1>
      <oc-placeholder-v1>23</oc-placeholder-v1>
      <oc-placeholder-v1>24</oc-placeholder-v1>
    </div>`;
  }
}
Class oc-grid--container-queries

By default, the oc-grid helper classes break on the viewport size, meaning that the grid layout adapts to the size of the browser window. To configure the grid for container queries and let all breakpoint classes break on the container size, use the oc-grid--container-queries class on the grid container element:

<div class="oc-grid oc-grid--container-queries">...</div>

Preset: oc-grid--container-queries

Story: fragments-layout-and-spacing-grid--preset-container-queries · tags: 

<div class="oc-grid oc-grid--container-queries">
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">2</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">3</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">4</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">5</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">6</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">7</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">8</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">9</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">10</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">11</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">12</oc-placeholder-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Preset: oc-grid--container-queries",
  render() {
    return html` <div class="oc-grid oc-grid--container-queries">
      <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">1</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">2</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">3</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">4</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">5</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">6</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">7</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">8</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">9</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">10</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">11</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">12</oc-placeholder-v1>
    </div>`;
  }
}

Column helper classes

Horizontal spacing

To give an item more horizontal space, use the helper class oc-grid__col--n, where n is a number between 1 and 12. The item stretches to take up the specified number of columns.

For example, to create a grid with two items, each taking up half of the available space, add the classes oc-grid__col--6 to the items:

<div class="oc-grid oc-grid--page">
  <oc-placeholder-v1 class="oc-grid__col--6">Item 1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6">Item 2</oc-placeholder-v1>
</div>

Column Spacing

Story: fragments-layout-and-spacing-grid--horizontal-spacing · tags: 

<div class="oc-grid oc-grid--page">
  <oc-placeholder-v1 class="oc-grid__col--6">Item 1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6">Item 2</oc-placeholder-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Column Spacing",
  render() {
    return html` <div class="oc-grid oc-grid--page">
      <oc-placeholder-v1 class="oc-grid__col--6">Item 1</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--6">Item 2</oc-placeholder-v1>
    </div>`;
  }
}
Horizontal positioning

To position an item horizontally, use the helper class oc-grid__col--start-n, where n is a number between 1 and 12. The item starts at the specified column.

For example, to let one item start at column 3 ("Item 3") and one item at column 10 ("Item 4"), use the classes oc-grid__col--start-3 and oc-grid__col--start-10:

Column Position

Story: fragments-layout-and-spacing-grid--column-position · tags: 

<div class="oc-grid oc-grid--page">
  <oc-placeholder-v1 class="oc-grid__col--7">Item 1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--3">Item 2</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__col--start-3">Item 3</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--2 oc-grid__col--start-10">Item 4</oc-placeholder-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Column Position",
  render() {
    return html` <div class="oc-grid oc-grid--page">
      <oc-placeholder-v1 class="oc-grid__col--7">Item 1</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--3">Item 2</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__col--start-3">Item 3</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--2 oc-grid__col--start-10">Item 4</oc-placeholder-v1>
    </div>`;
  }
}
Column breakpoint support

Both column helper classes have breakpoint support for different screen sizes. To use breakpoint support, extend the class name with the breakpoint name, resulting in the classes oc-grid__col--breakpoint-n for sizing and oc-grid__col--start-breakpoint-n for positioning.

The breakpoint name can be s, m, l, or xl and the column number n can be between 1 and 12.

Class name Description Example
oc-grid__col--breakpoint-n Size an item to n columns at the breakpoint. oc-grid__col--s-6
oc-grid__col--start-breakpoint-n Position an item in column n at the breakpoint. oc-grid__col--start-s-6

In the following example, Item 7 has the class oc-grid__col--start-l-6, which means it starts at column 6 at the l breakpoint.

  • As you resize the viewport, making it smaller than the l breakpoint, "Item 7" loses the positioning and aligns with Items 6,8, and 9.
  • As you resize the viewport even further to breakpoint s, all items are aligned in one column, losing the effects of their breakpoint m classes.

Responsive

Story: fragments-layout-and-spacing-grid--responsive · tags: 

<div class="oc-grid oc-grid--content">
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6" variant="text"
    >1
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6" variant="text"
    >2
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-4" variant="text"
    >3
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-4" variant="text"
    >4
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-4" variant="text"
    >5
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-3" variant="text"
    >6
  </oc-placeholder-v1>
  <oc-placeholder-v1
    class="oc-grid__col--12 oc-grid__col--m-3 oc-grid__col--start-l-6"
    variant="text"
    >7
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-3" variant="text"
    >8
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-3" variant="text"
    >9
  </oc-placeholder-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Responsive",
  render() {
    return html`
      <div class="oc-grid oc-grid--content">
        <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6" variant="text"
          >1
        </oc-placeholder-v1>
        <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6" variant="text"
          >2
        </oc-placeholder-v1>
        <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-4" variant="text"
          >3
        </oc-placeholder-v1>
        <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-4" variant="text"
          >4
        </oc-placeholder-v1>
        <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-4" variant="text"
          >5
        </oc-placeholder-v1>
        <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-3" variant="text"
          >6
        </oc-placeholder-v1>
        <oc-placeholder-v1
          class="oc-grid__col--12 oc-grid__col--m-3 oc-grid__col--start-l-6"
          variant="text"
          >7
        </oc-placeholder-v1>
        <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-3" variant="text"
          >8
        </oc-placeholder-v1>
        <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-3" variant="text"
          >9
        </oc-placeholder-v1>
      </div>
    `;
  }
}

Row helper classes

Vertical spacing

To give an item more vertical relative space to other items, add the helper class oc-grid__row--n, where n is a number between 1 and 12. The item stretches to take up the specified number of rows.

For example, to create a grid with three items, where the first item takes up two rows and the other two items take up one row each, use the classes oc-grid__row--2 and oc-grid__row--1:

<div class="oc-grid oc-grid--content">
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--2">Item 1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--1">Item 2</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--1">Item 3</oc-placeholder-v1>
</div>

Row Spacing

Story: fragments-layout-and-spacing-grid--row-spacing · tags: 

<div class="oc-grid oc-grid--content">
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--2">Item 1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--1">Item 2</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--1">Item 3</oc-placeholder-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Row Spacing",
  render() {
    return html` <div class="oc-grid oc-grid--content">
      <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--2">Item 1</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--1">Item 2</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--1">Item 3</oc-placeholder-v1>
    </div>`;
  }
}
Vertical positioning

To position an item vertically, add the helper class oc-grid__row--start-n, where n is a number between 1 and 12. The item starts at the specified row.

For example, to let one item start at row 2 ("Item 1") and one item at row 5 ("Item 2"), use the classes oc-grid__row--start-2 and oc-grid__row--start-5:

<div class="oc-grid">
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--start-2">Item 1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--start-5">Item 2</oc-placeholder-v1>
</div>

Row Position

Story: fragments-layout-and-spacing-grid--row-position · tags: 

<div class="oc-grid oc-grid--content">
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--start-3">Item 1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--start-7">Item 2</oc-placeholder-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Row Position",
  render() {
    return html` <div class="oc-grid oc-grid--content">
      <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--start-3">Item 1</oc-placeholder-v1>
      <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--start-7">Item 2</oc-placeholder-v1>
    </div>`;
  }
}
Row breakpoint support

Currently, the row helper classes have no breakpoint support, yet.

Gap and margin helper classes

Grid gap

To add space between items, set a gap helper class on the grid container element. The gap class overwrites the default gap set by the oc-grid--content or oc-grid--page class. Find all available gap classes in the gap utility documentation.

The following example grid uses the oc-gap-50 class to set a gap of 8px between the items:

<div class="oc-grid oc-gap-50">
  <oc-placeholder-v1> Item 1</oc-placeholder-v1>
  <oc-placeholder-v1> Item 2</oc-placeholder-v1>
</div>

Basic gap class

Story: fragments-layout-and-spacing-grid--basic-gap-class · tags: 

<div class="oc-grid oc-gap-50">
  <oc-placeholder-v1>Item 1</oc-placeholder-v1>
  <oc-placeholder-v1>Item 2</oc-placeholder-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Basic gap class",
  render() {
    return html` <div class="oc-grid oc-gap-50">
      <oc-placeholder-v1>Item 1</oc-placeholder-v1>
      <oc-placeholder-v1>Item 2</oc-placeholder-v1>
    </div>`;
  }
}
Grid margin

To add outer space to the grid container, set a margin helper class on the grid container element. The margin class overwrites the default margin set by the oc-grid--content or oc-grid--page class. Find all available margin classes in the spacing utility documentation.

The following example grid uses the oc-mx-100 class to set a horizontal margin of 16px to the grid container:

<div class="oc-grid oc-mx-100">
  <oc-placeholder-v1>Item 1<</oc-placeholder-v1>
  <oc-placeholder-v1>Item 2</oc-placeholder-v1>
</div>

Basic margin class

Story: fragments-layout-and-spacing-grid--basic-margin-class · tags: 

<div class="oc-grid oc-mx-100">
  <oc-placeholder-v1>Item 1</oc-placeholder-v1>
  <oc-placeholder-v1>Item 2</oc-placeholder-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Basic margin class",
  render() {
    return html` <div class="oc-grid oc-mx-100">
      <oc-placeholder-v1>Item 1</oc-placeholder-v1>
      <oc-placeholder-v1>Item 2</oc-placeholder-v1>
    </div>`;
  }
}

Accessibility

Ensure that the visible order of the content is logical and that the content is accessible to all users. Try to avoid changing the visibility order of the content. Otherwise, screen readers may not be able to read the content in the correct order.

In the following example, its bad practice to let the first item start at column 7 and the second item at column 1, as it would lead to a wrong display and reading order. The correct order would be to let the first item start at column 1 and the second item at column 7:

<div class="oc-grid">
  <div class="oc-grid__col--4 oc-grid__col--start-7 oc-grid__row--start-1">Item 1</div>
  <div class="oc-grid__col--4 oc-grid__col--start-1 oc-grid__row--start-1">Item 2</div>
</div>

Layout and spacing/Grid (Grid.stories.ts)

Story Default:

<div class="oc-grid">
  <oc-placeholder-v1>1</oc-placeholder-v1>
  <oc-placeholder-v1>2</oc-placeholder-v1>
  <oc-placeholder-v1>3</oc-placeholder-v1>
  <oc-placeholder-v1>4</oc-placeholder-v1>
  <oc-placeholder-v1>5</oc-placeholder-v1>
  <oc-placeholder-v1>6</oc-placeholder-v1>
  <oc-placeholder-v1>7</oc-placeholder-v1>
  <oc-placeholder-v1>8</oc-placeholder-v1>
  <oc-placeholder-v1>9</oc-placeholder-v1>
  <oc-placeholder-v1>10</oc-placeholder-v1>
  <oc-placeholder-v1>11</oc-placeholder-v1>
  <oc-placeholder-v1>12</oc-placeholder-v1>
  <oc-placeholder-v1>13</oc-placeholder-v1>
  <oc-placeholder-v1>14</oc-placeholder-v1>
  <oc-placeholder-v1>15</oc-placeholder-v1>
  <oc-placeholder-v1>16</oc-placeholder-v1>
  <oc-placeholder-v1>17</oc-placeholder-v1>
  <oc-placeholder-v1>18</oc-placeholder-v1>
  <oc-placeholder-v1>19</oc-placeholder-v1>
  <oc-placeholder-v1>20</oc-placeholder-v1>
  <oc-placeholder-v1>21</oc-placeholder-v1>
  <oc-placeholder-v1>22</oc-placeholder-v1>
  <oc-placeholder-v1>23</oc-placeholder-v1>
  <oc-placeholder-v1>24</oc-placeholder-v1>
</div>

Story Preset: grid--content:

<div class="oc-grid oc-grid--content">
  <oc-placeholder-v1>1</oc-placeholder-v1>
  <oc-placeholder-v1>2</oc-placeholder-v1>
  <oc-placeholder-v1>3</oc-placeholder-v1>
  <oc-placeholder-v1>4</oc-placeholder-v1>
  <oc-placeholder-v1>5</oc-placeholder-v1>
  <oc-placeholder-v1>6</oc-placeholder-v1>
  <oc-placeholder-v1>7</oc-placeholder-v1>
  <oc-placeholder-v1>8</oc-placeholder-v1>
  <oc-placeholder-v1>9</oc-placeholder-v1>
  <oc-placeholder-v1>10</oc-placeholder-v1>
  <oc-placeholder-v1>11</oc-placeholder-v1>
  <oc-placeholder-v1>12</oc-placeholder-v1>
  <oc-placeholder-v1>13</oc-placeholder-v1>
  <oc-placeholder-v1>14</oc-placeholder-v1>
  <oc-placeholder-v1>15</oc-placeholder-v1>
  <oc-placeholder-v1>16</oc-placeholder-v1>
  <oc-placeholder-v1>17</oc-placeholder-v1>
  <oc-placeholder-v1>18</oc-placeholder-v1>
  <oc-placeholder-v1>19</oc-placeholder-v1>
  <oc-placeholder-v1>20</oc-placeholder-v1>
  <oc-placeholder-v1>21</oc-placeholder-v1>
  <oc-placeholder-v1>22</oc-placeholder-v1>
  <oc-placeholder-v1>23</oc-placeholder-v1>
  <oc-placeholder-v1>24</oc-placeholder-v1>
</div>

Story Preset: grid--page:

<div class="oc-grid oc-grid--page">
  <oc-placeholder-v1>1</oc-placeholder-v1>
  <oc-placeholder-v1>2</oc-placeholder-v1>
  <oc-placeholder-v1>3</oc-placeholder-v1>
  <oc-placeholder-v1>4</oc-placeholder-v1>
  <oc-placeholder-v1>5</oc-placeholder-v1>
  <oc-placeholder-v1>6</oc-placeholder-v1>
  <oc-placeholder-v1>7</oc-placeholder-v1>
  <oc-placeholder-v1>8</oc-placeholder-v1>
  <oc-placeholder-v1>9</oc-placeholder-v1>
  <oc-placeholder-v1>10</oc-placeholder-v1>
  <oc-placeholder-v1>11</oc-placeholder-v1>
  <oc-placeholder-v1>12</oc-placeholder-v1>
  <oc-placeholder-v1>13</oc-placeholder-v1>
  <oc-placeholder-v1>14</oc-placeholder-v1>
  <oc-placeholder-v1>15</oc-placeholder-v1>
  <oc-placeholder-v1>16</oc-placeholder-v1>
  <oc-placeholder-v1>17</oc-placeholder-v1>
  <oc-placeholder-v1>18</oc-placeholder-v1>
  <oc-placeholder-v1>19</oc-placeholder-v1>
  <oc-placeholder-v1>20</oc-placeholder-v1>
  <oc-placeholder-v1>21</oc-placeholder-v1>
  <oc-placeholder-v1>22</oc-placeholder-v1>
  <oc-placeholder-v1>23</oc-placeholder-v1>
  <oc-placeholder-v1>24</oc-placeholder-v1>
</div>

Story Preset: oc-grid--container-queries:

<div class="oc-grid oc-grid--container-queries">
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">2</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">3</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">4</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">5</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">6</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">7</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">8</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">9</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">10</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">11</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6">12</oc-placeholder-v1>
</div>

Story Column Spacing:

<div class="oc-grid oc-grid--page">
  <oc-placeholder-v1 class="oc-grid__col--6">Item 1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6">Item 2</oc-placeholder-v1>
</div>

Story Column Position:

<div class="oc-grid oc-grid--page">
  <oc-placeholder-v1 class="oc-grid__col--7">Item 1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--3">Item 2</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__col--start-3">Item 3</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--2 oc-grid__col--start-10">Item 4</oc-placeholder-v1>
</div>

Story Row Spacing:

<div class="oc-grid oc-grid--content">
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--2">Item 1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--1">Item 2</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--1">Item 3</oc-placeholder-v1>
</div>

Story Row Position:

<div class="oc-grid oc-grid--content">
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--start-3">Item 1</oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--6 oc-grid__row--start-7">Item 2</oc-placeholder-v1>
</div>

Story Basic gap class:

<div class="oc-grid oc-gap-50">
  <oc-placeholder-v1>Item 1</oc-placeholder-v1>
  <oc-placeholder-v1>Item 2</oc-placeholder-v1>
</div>

Story Basic margin class:

<div class="oc-grid oc-mx-100">
  <oc-placeholder-v1>Item 1</oc-placeholder-v1>
  <oc-placeholder-v1>Item 2</oc-placeholder-v1>
</div>

Story Responsive:

<div class="oc-grid oc-grid--content">
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6" variant="text"
    >1
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-6" variant="text"
    >2
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-4" variant="text"
    >3
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-4" variant="text"
    >4
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-4" variant="text"
    >5
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-3" variant="text"
    >6
  </oc-placeholder-v1>
  <oc-placeholder-v1
    class="oc-grid__col--12 oc-grid__col--m-3 oc-grid__col--start-l-6"
    variant="text"
    >7
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-3" variant="text"
    >8
  </oc-placeholder-v1>
  <oc-placeholder-v1 class="oc-grid__col--12 oc-grid__col--m-3" variant="text"
    >9
  </oc-placeholder-v1>
</div>

Gap and Margin

Story: fragments-layout-and-spacing-grid--gap-and-margin · tags: 

<div class="oc-grid oc-gap-50 oc-mx-100">
  <oc-placeholder-v1>1</oc-placeholder-v1>
  <oc-placeholder-v1>2</oc-placeholder-v1>
  <oc-placeholder-v1>3</oc-placeholder-v1>
  <oc-placeholder-v1>4</oc-placeholder-v1>
  <oc-placeholder-v1>5</oc-placeholder-v1>
  <oc-placeholder-v1>6</oc-placeholder-v1>
  <oc-placeholder-v1>7</oc-placeholder-v1>
  <oc-placeholder-v1>8</oc-placeholder-v1>
  <oc-placeholder-v1>9</oc-placeholder-v1>
  <oc-placeholder-v1>10</oc-placeholder-v1>
  <oc-placeholder-v1>11</oc-placeholder-v1>
  <oc-placeholder-v1>12</oc-placeholder-v1>
  <oc-placeholder-v1>13</oc-placeholder-v1>
  <oc-placeholder-v1>14</oc-placeholder-v1>
  <oc-placeholder-v1>15</oc-placeholder-v1>
  <oc-placeholder-v1>16</oc-placeholder-v1>
  <oc-placeholder-v1>17</oc-placeholder-v1>
  <oc-placeholder-v1>18</oc-placeholder-v1>
  <oc-placeholder-v1>19</oc-placeholder-v1>
  <oc-placeholder-v1>20</oc-placeholder-v1>
  <oc-placeholder-v1>21</oc-placeholder-v1>
  <oc-placeholder-v1>22</oc-placeholder-v1>
  <oc-placeholder-v1>23</oc-placeholder-v1>
  <oc-placeholder-v1>24</oc-placeholder-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Gap and Margin",
  args: {},
  render() {
    return html`
      <div class="oc-grid oc-gap-50 oc-mx-100">
        <oc-placeholder-v1>1</oc-placeholder-v1>
        <oc-placeholder-v1>2</oc-placeholder-v1>
        <oc-placeholder-v1>3</oc-placeholder-v1>
        <oc-placeholder-v1>4</oc-placeholder-v1>
        <oc-placeholder-v1>5</oc-placeholder-v1>
        <oc-placeholder-v1>6</oc-placeholder-v1>
        <oc-placeholder-v1>7</oc-placeholder-v1>
        <oc-placeholder-v1>8</oc-placeholder-v1>
        <oc-placeholder-v1>9</oc-placeholder-v1>
        <oc-placeholder-v1>10</oc-placeholder-v1>
        <oc-placeholder-v1>11</oc-placeholder-v1>
        <oc-placeholder-v1>12</oc-placeholder-v1>
        <oc-placeholder-v1>13</oc-placeholder-v1>
        <oc-placeholder-v1>14</oc-placeholder-v1>
        <oc-placeholder-v1>15</oc-placeholder-v1>
        <oc-placeholder-v1>16</oc-placeholder-v1>
        <oc-placeholder-v1>17</oc-placeholder-v1>
        <oc-placeholder-v1>18</oc-placeholder-v1>
        <oc-placeholder-v1>19</oc-placeholder-v1>
        <oc-placeholder-v1>20</oc-placeholder-v1>
        <oc-placeholder-v1>21</oc-placeholder-v1>
        <oc-placeholder-v1>22</oc-placeholder-v1>
        <oc-placeholder-v1>23</oc-placeholder-v1>
        <oc-placeholder-v1>24</oc-placeholder-v1>
      </div>
    `;
  }
}

Demo: Blocks in a grid

Story: fragments-layout-and-spacing-grid--demo-blocks-in-a-grid · tags:

Story source (TypeScript, verbatim from Storybook)
{
  name: "Demo: Blocks in a grid",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: {
    content: {
      table: {
        disable: true
      }
    }
  },
  render: () => {
    return `

    <div class="oc-grid oc-grid--page">
        <div class="oc-block-v1 oc-grid__col--4 oc-grid__row--start-1">
          <h3 class="oc-headline-100 oc-mb-50">Some example content</h3>
          <p class="oc-copy-100">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
          </p>
        </div>
        <div class="oc-block-v1 oc-grid__col--4 ">
          <h3 class="oc-headline-100 oc-mb-50">Some example content</h3>
          <p class="oc-copy-100">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
          </p>
        </div>
        <div class="oc-block-v1 oc-grid__col--8 oc-grid__row--2 oc-grid__row--start-1">
          <h3 class="oc-headline-100 oc-mb-50">Some example content</h3>
          <p class="oc-copy-100">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
        </div>
    </div>`;
  }
}

Demo: Product Page

Story: fragments-layout-and-spacing-grid--demo-product-page · tags: 

<div class="oc-grid oc-gap-25">
  <div class="oc-block-v1 oc-grid__col--12">
    <oc-placeholder-v1>Head</oc-placeholder-v1>
  </div>
  <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-7 oc-grid__row--3">
    <oc-placeholder-v1>Left</oc-placeholder-v1>
  </div>
  <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-5 oc-grid__row--1">
    <oc-placeholder-v1>Right 1</oc-placeholder-v1>
  </div>
  <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-5 oc-grid__row--1">
    <oc-placeholder-v1>Right 2</oc-placeholder-v1>
  </div>
  <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-5 oc-grid__row--1">
    <oc-placeholder-v1>Right 3</oc-placeholder-v1>
  </div>
  <div class="oc-block-v1 oc-grid__col--12">
    <oc-placeholder-v1>Middle</oc-placeholder-v1>
  </div>
  <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-7 oc-grid__row--3">
    <oc-placeholder-v1>Left</oc-placeholder-v1>
  </div>
  <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-5 oc-grid__row--1">
    <oc-placeholder-v1>Right 1</oc-placeholder-v1>
  </div>
  <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-5 oc-grid__row--1">
    <oc-placeholder-v1>Right 2</oc-placeholder-v1>
  </div>
  <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-5 oc-grid__row--1">
    <oc-placeholder-v1>Right 3</oc-placeholder-v1>
  </div>
</div>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Demo: Product Page",
  render() {
    return html`
      <div class="oc-grid oc-gap-25">
        <div class="oc-block-v1 oc-grid__col--12">
          <oc-placeholder-v1>Head</oc-placeholder-v1>
        </div>
        <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-7 oc-grid__row--3">
          <oc-placeholder-v1>Left</oc-placeholder-v1>
        </div>
        <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-5 oc-grid__row--1">
          <oc-placeholder-v1>Right 1</oc-placeholder-v1>
        </div>
        <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-5 oc-grid__row--1">
          <oc-placeholder-v1>Right 2</oc-placeholder-v1>
        </div>
        <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-5 oc-grid__row--1">
          <oc-placeholder-v1>Right 3</oc-placeholder-v1>
        </div>
        <div class="oc-block-v1 oc-grid__col--12">
          <oc-placeholder-v1>Middle</oc-placeholder-v1>
        </div>
        <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-7 oc-grid__row--3">
          <oc-placeholder-v1>Left</oc-placeholder-v1>
        </div>
        <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-5 oc-grid__row--1">
          <oc-placeholder-v1>Right 1</oc-placeholder-v1>
        </div>
        <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-5 oc-grid__row--1">
          <oc-placeholder-v1>Right 2</oc-placeholder-v1>
        </div>
        <div class="oc-block-v1 oc-grid__col--12 oc-grid__col--m-5 oc-grid__row--1">
          <oc-placeholder-v1>Right 3</oc-placeholder-v1>
        </div>
      </div>
      </div> `;
  }
}