The grid layout is useful for laying out forms.
The grid is optional and can be used for very speicific page layout needs such as forms or news items.
The grid provides for up to 12 columns, all columns become full-width stacked on viewports < 768px.
<div class="ds-block">
<div class="ds-grid ds-grid--example">
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-2">
<h3>2</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-2">
<h3>2</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-2">
<h3>2</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-2">
<h3>2</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-2">
<h3>2</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-2">
<h3>2</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-3">
<h3>3</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-3">
<h3>3</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-3">
<h3>3</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-3">
<h3>3</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-4">
<h3>4</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-4">
<h3>4</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-4">
<h3>4</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-6">
<h3>6</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-6">
<h3>6</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-7">
<h3>7</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-5">
<h3>5</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-8">
<h3>8</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-4">
<h3>4</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-9">
<h3>9</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-3">
<h3>3</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-10">
<h3>10</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-2">
<h3>2</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-11">
<h3>11</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-1">
<h3>1</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-12">
<h3>12</h3>
<p>Good bye</p>
</div>
</div>
</div><div class="ds-block">
<div class="ds-grid ds-grid--no-gutter ds-grid--example">
<div class="ds-grid__col-3">
<h3>Hello</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-3">
<h3>Hello</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-3">
<div class="ds-well">
<h3>Hello</h3>
<p>Good bye</p>
</div>
</div>
<div class="ds-grid__col-3">
<div class="ds-well ds-well--alt-color">
<h3>Hello</h3>
<p>Good bye</p>
</div>
</div>
<div class="ds-grid__col-4">
<h3>Hello</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-4">
<h3>Hello</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-4">
<h3>Hello</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-6">
<h3>Hello</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-6">
<h3>Hello</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-8">
<h3>Hello</h3>
<p>Good bye</p>
</div>
<div class="ds-grid__col-4">
<h3>Hello</h3>
<p>Good bye</p>
</div>
</div>
</div>