scol-fit

You can check the full list of available breakpoints here.

How to use

  • *:scol-fit-*

.scol-fit is a variation of .scol, both behave the same and use the same modifiers but their distribution is different, each .scol-fit is divided by 100% of the available space. Columns are created by specifying the breakpoint and number of available columns you want to cover, for example 5 equal columns would use five .x:scol-fit-5

Remember that all columns must be inside a .line container.


<div class="line">
  <div class="x:scol-fit-5">5</div>
  <div class="x:scol-fit-5">5</div>
  <div class="x:scol-fit-5">5</div>
  <div class="x:scol-fit-5">5</div>
  <div class="x:scol-fit-5">5</div>
</div>
5
5
5
5
5

Columns can be enhanced with helpers such as margin and padding or alignment, for example you can remove the default column padding using .x:pad-all-0 or increase it with .x:pad-left-40

scol

You can also combine column types using scol and scol-fit at the same time.

How to use scol 

<div classs="line">
  <div class="x:scol-4 m:scol-fit-5">4 <-> 5</div>
  <div class="x:scol-4 m:scol-fit-5">4 <-> 5</div>
  <div class="x:scol-4 m:scol-fit-5">4 <-> 5</div>
  <div class="x:scol-6 m:scol-fit-5">4 <-> 5</div>
  <div class="x:scol-6 m:scol-fit-5">4 <-> 5</div>
</div>
4 <-> 5
4 <-> 5
4 <-> 5
6 <-> 5
6 <-> 5

Grid distribution

The following grid representation will help you understand the arrangement and give you an idea of the available columns and how to use them.

1
2
2
3
3
3
4
4
4
4
5
5
5
5
5
6
6
6
6
6
6
7
7
7
7
7
7
7
8
8
8
8
8
8
8
8
9
9
9
9
9
9
9
9
9
10
10
10
10
10
10
10
10
10
10
11
11
11
11
11
11
11
11
11
11
11
12
12
12
12
12
12
12
12
12
12
12
12