line

What is line?

.line is the main container for the columns and distributes the space between them. It must contain only columns and the content must be inside the columns.

How to use

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


<div class="line">
  <div class="x:scol-6">
    ...
  </div>
  <div class="x:scol-6">
    ...
  </div>
</div>

.line occupies 100% of the container where it is located, if you need to limit it to a safe area you can place it inside .scontainer or nest it inside a container that limits its width.


<div class="scontainer">
  <div class="line">
    ...
  </div>
</div>

Nested content

.line can be inside a column and it compensates with negative margin the space necessary for the nested content to be correctly aligned.

Compensating with negative margin of space required for nested content only works if .line is a direct child of scol or scol-fit, otherwise the space will remain the same.


<div class="line">
  <div class="x:scol-6">6</div>
  <div class="x:scol-6">
    <div class="line">
      <div class="x:scol-4">4</div>
      <div class="x:scol-4">4</div>
      <div class="x:scol-4">4</div>
    </div>
  </div>
</div>

Indirectly nested content

If for some reason you want to set negative margin to nested content but the .line container is not a direct child of some scol or scol-fit, you can set the required negative margin manually using .x:-mrg-all-10, with this you can achieve the same effect.

A column has a padding of 10px by default, so the necessary negative margin should be 10px, that's why you should use the .x:-mrg-all-10 class.


<div class="line">
  <div class="x:scol-6">6</div>
  <div class="x:scol-6">
    <div class="other-container">
      <div class="line x:-mrg-all-10">
        <div class="x:scol-4">4</div>
        <div class="x:scol-4">4</div>
        <div class="x:scol-4">4</div>
      </div>
    </div>
  </div>
</div>