If instead of having a minimum column width you want a fixed number of columns, wrap your grid in a fixed-grid container.
By default, this fixed grid has 2 columns:
Sponsor
Fixed Grid
A customizable 2D fixed grid
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 11
Cell 12
HTML
<div class="fixed-grid">
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
<div class="cell">Cell 7</div>
<div class="cell">Cell 8</div>
<div class="cell">Cell 9</div>
<div class="cell">Cell 10</div>
<div class="cell">Cell 11</div>
<div class="cell">Cell 12</div>
</div>
</div>Applying fixed grid modifiers #
You can change the column count by adding the has-$n-cols modifier class with a value ranging from 1 to 12:
| Class | Column Count |
|---|---|
has-0-cols |
0 |
has-1-cols |
1 |
has-2-cols |
2 |
has-3-cols |
3 |
has-4-cols |
4 |
has-5-cols |
5 |
has-6-cols |
6 |
has-7-cols |
7 |
has-8-cols |
8 |
has-9-cols |
9 |
has-10-cols |
10 |
has-11-cols |
11 |
has-12-cols |
12 |
Container breakpoints #
You can specify a different column count per breakpoint:
| Column Count | Mobile | Tablet | Desktop | Widescreen | Full HD |
|---|---|---|---|---|---|
Until 768px |
From 769px |
From 1024px |
From 1216px |
From 1408px |
|
| 1 | has-1-cols-mobile |
has-1-cols-tablet |
has-1-cols-desktop |
has-1-cols-widescreen |
has-1-cols-fullhd |
| 2 | has-2-cols-mobile |
has-2-cols-tablet |
has-2-cols-desktop |
has-2-cols-widescreen |
has-2-cols-fullhd |
| 3 | has-3-cols-mobile |
has-3-cols-tablet |
has-3-cols-desktop |
has-3-cols-widescreen |
has-3-cols-fullhd |
| 4 | has-4-cols-mobile |
has-4-cols-tablet |
has-4-cols-desktop |
has-4-cols-widescreen |
has-4-cols-fullhd |
| 5 | has-5-cols-mobile |
has-5-cols-tablet |
has-5-cols-desktop |
has-5-cols-widescreen |
has-5-cols-fullhd |
| 6 | has-6-cols-mobile |
has-6-cols-tablet |
has-6-cols-desktop |
has-6-cols-widescreen |
has-6-cols-fullhd |
| 7 | has-7-cols-mobile |
has-7-cols-tablet |
has-7-cols-desktop |
has-7-cols-widescreen |
has-7-cols-fullhd |
| 8 | has-8-cols-mobile |
has-8-cols-tablet |
has-8-cols-desktop |
has-8-cols-widescreen |
has-8-cols-fullhd |
| 9 | has-9-cols-mobile |
has-9-cols-tablet |
has-9-cols-desktop |
has-9-cols-widescreen |
has-9-cols-fullhd |
| 10 | has-10-cols-mobile |
has-10-cols-tablet |
has-10-cols-desktop |
has-10-cols-widescreen |
has-10-cols-fullhd |
| 11 | has-11-cols-mobile |
has-11-cols-tablet |
has-11-cols-desktop |
has-11-cols-widescreen |
has-11-cols-fullhd |
| 12 | has-12-cols-mobile |
has-12-cols-tablet |
has-12-cols-desktop |
has-12-cols-widescreen |
has-12-cols-fullhd |
Auto Count Fixed Grid #
By adding the has-auto-count modifier, the fixed grid will automatically change its count for each breakpoint:
- 2 on mobile
- 4 on tablet
- 8 on desktop
- 12 on widescreen
- 16 on fullhd
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 11
Cell 12
Cell 13
Cell 14
Cell 15
Cell 16
HTML
<div class="fixed-grid has-auto-count">
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
<div class="cell">Cell 7</div>
<div class="cell">Cell 8</div>
<div class="cell">Cell 9</div>
<div class="cell">Cell 10</div>
<div class="cell">Cell 11</div>
<div class="cell">Cell 12</div>
<div class="cell">Cell 13</div>
<div class="cell">Cell 14</div>
<div class="cell">Cell 15</div>
<div class="cell">Cell 16</div>
</div>
</div>