Skip to content
Toyota Motor Europe DXP Reference Guide

Grid

<div class="tng-simple-grid">
  <div class="tng-surface border-sm p-sm">Item 1</div>
  <div class="tng-surface border-sm p-sm">Item 2</div>
  <div class="tng-surface border-sm p-sm">Item 3</div>
  <div class="tng-surface border-sm p-sm">Item 4</div>
  <div class="tng-surface border-sm p-sm">Item 5</div>
  <div class="tng-surface border-sm p-sm">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Utilities

Section titled “Utilities”

All our layouts that are Flexbox or Grid based support the base same utilities.

Size

Section titled “Size”

You can use our size utility to adjust the size of the grid items.

<div class="tng-simple-grid size-3xs">
  <div class="tng-surface border-sm p-sm">Item 1</div>
  <div class="tng-surface border-sm p-sm">Item 2</div>
  <div class="tng-surface border-sm p-sm">Item 3</div>
  <div class="tng-surface border-sm p-sm">Item 4</div>
  <div class="tng-surface border-sm p-sm">Item 5</div>
  <div class="tng-surface border-sm p-sm">Item 6</div>
</div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6