8.2 #Structure.Grid Grid
Extra Small (xs), Small (sm), Medium (md), Large (lg), xLarge (xlg)
Examples
Default styling
col
col-12
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
.gridGap--noGap
No Gap
col
col-12
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
.gridGap--small
Small Gap
col
col-12
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
.gridGap--large
Large Gap
col
col-12
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
Markup
<div class="row [modifier class]">
<div class="col marginBottom"><div class="kssPaddingBox">col</div></div>
</div>
<div class="row [modifier class]">
<div class="col-12 marginBottom"><div class="kssPaddingBox">col-12</div></div>
</div>
<div class="row [modifier class]">
<div class="col-1 marginBottom"><div class="kssPaddingBox">col-1</div></div>
<div class="col-11 marginBottom"><div class="kssPaddingBox">col-11</div></div>
</div>
<div class="row [modifier class]">
<div class="col-2 marginBottom"><div class="kssPaddingBox">col-2</div></div>
<div class="col-10 marginBottom"><div class="kssPaddingBox">col-10</div></div>
</div>
<div class="row [modifier class]">
<div class="col-3 marginBottom"><div class="kssPaddingBox">col-3</div></div>
<div class="col-9 marginBottom"><div class="kssPaddingBox">col-9</div></div>
</div>
<div class="row [modifier class]">
<div class="col-4 marginBottom"><div class="kssPaddingBox">col-4</div></div>
<div class="col-8 marginBottom"><div class="kssPaddingBox">col-8</div></div>
</div>
<div class="row [modifier class]">
<div class="col-5 marginBottom"><div class="kssPaddingBox">col-5</div></div>
<div class="col-7 marginBottom"><div class="kssPaddingBox">col-7</div></div>
</div>
<div class="row [modifier class]">
<div class="col-6 marginBottom"><div class="kssPaddingBox">col-6</div></div>
<div class="col-6 marginBottom"><div class="kssPaddingBox">col-6</div></div>
</div>
Source:
build/doc/doc.css, line 5234