Grid

A simple grid layout that distributes items in equal-width columns.

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

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Utilities

Size

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

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

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6