Grid
HTMLNumber of columns in a row
By default, .grid is using 12 column system with auto responsive columns.
All the columns are equal width and you can put as many columns in a grid as you want and columns will be
moved to a new row when there is not enough space in a container.
Default
1
2
3
4
5
6
7
8
9
10
11
12
3 columns - responsive
1
2
3
4
5
6
7
8
9
10
11
12
HTML
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<div class="grid grid--2 sm:grid--3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
Auto Fill column
By default, .grid is using 12 column system with auto responsive columns.
All the columns are equal width and you can put as many columns in a grid as you want and columns will be
moved to a new row when there is not enough space in a container.
Narrow
1
2
3
4
5
6
Regular (default)
1
2
3
4
5
6
Wide
1
2
3
4
5
6
HTML
<div class="grid grid--columns-auto-narrow">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="grid grid--columns-auto-wide">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Different column width
1
2
3
4
5
6
7
8
9
HTML
<div class="grid">
<div class="col-6">1</div>
<div class="col-6">2</div>
<div class="col-4">3</div>
<div class="col-3">4</div>
<div class="col-5">5</div>
<div class="col-1">6</div>
<div class="col-2">7</div>
<div class="col-7">8</div>
<div class="col-2">9</div>
</div>
Grid options
| Max container width | Class prefix | |
|---|---|---|
| Default > 0px | 100% | col- and row- |
| Extra extra small > 320px | 100% | xxs:col- and xxs:row- |
| Extra small > 480px | 480px | xs:col- and xs:row- |
| Small > 640px | 580px | sm:col- and sm:row- |
| Medium > 768px | 720px | md:col- and md:row- |
| Large > 991px | 960px | lg:col- and lg:row- |
| Extra large > 1200px | 1140px | xl:col- and xl:row- |
| Extra extra large > 1440px | 1280px | xxl:col- and xxl:row- |