OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it

Breakpoints

Resize your browser window to see different number of columns on the different viewport breakoints desktop, tablet and phone.

The breakpoint classes are applied on the parental column container, not on the childs like with Flexbox breakpoints or CSS grid. That’s because columns have a uniform table like look.

Syntax: .cols-{number}-{breakpoint}
SCSS: _column-breakpoints.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


9 columns on desktop
6 columns on tablet
3 columns on phone

<div class="columns gap-no cols-9 cols-6-t cols-3-p text-mono">
  <div class="box text-clip">1</div>
  <div class="box text-clip">2</div>
  <div class="box text-clip">3</div>
  <div class="box text-clip">4</div>
  <div class="box text-clip">5</div>
  <div class="box text-clip">6</div>
  <div class="box text-clip">7</div>
  <div class="box text-clip">8</div>
  <div class="box text-clip">9</div>
  <div class="box text-clip">10</div>
  <div class="box text-clip">11</div>
  <div class="box text-clip">12</div>
  <div class="box text-clip">13</div>
  <div class="box text-clip">14</div>
  <div class="box text-clip">15</div>
  <div class="box text-clip">16</div>
  <div class="box text-clip">17</div>
  <div class="box text-clip">18</div>
  <div class="box text-clip">19</div>
  <div class="box text-clip">20</div>
  <div class="box text-clip">21</div>
  <div class="box text-clip">22</div>
  <div class="box text-clip">23</div>
  <div class="box text-clip">24</div>
  <div class="box text-clip">25</div>
  <div class="box text-clip">26</div>
  <div class="box text-clip">27</div>
  <div class="box text-clip">28</div>
  <div class="box text-clip">29</div>
  <div class="box text-clip">30</div>
  <div class="box text-clip">31</div>
  <div class="box text-clip">32</div>
  <div class="box text-clip">33</div>
  <div class="box text-clip">34</div>
  <div class="box text-clip">35</div>
  <div class="box text-clip">36</div>
  <div class="box text-clip">37</div>
  <div class="box text-clip">38</div>
  <div class="box text-clip">39</div>
  <div class="box text-clip">40</div>
  <div class="box text-clip">41</div>
  <div class="box text-clip">42</div>
</div>
<p>
  &uarr;<br>
  9 columns on desktop<br>
  6 columns on tablet<br>
  3 columns on phone
</p>