Show grid

How to use

show-grid-scontainer
show-grid-line
show-grid-scol

During development you can show the layout you are working on and be able to better visualize the distribution of the columns or elements. The class will show all the elements inside the container that owns it, in this way you will be able to view the layout only of what you need to see without interfering with the rest of the site.

The border color is inherited from the dominant text color in the container

scontainer


<div class="container-example show-grid-scontainer">
  <div class="scontainer">
    <div class="line">
      <div class="x:scol-4"></div>
      <div class="x:scol-4"></div>
      <div class="x:scol-4"></div>
    </div>
  </div>
</div>

...

line


<div class="container-example show-grid-line">
  <div class="scontainer">
    <div class="line">
      <div class="x:scol-4"></div>
      <div class="x:scol-4"></div>
      <div class="x:scol-4"></div>
    </div>
  </div>
</div>

...

scol / scol-fit


<div class="container-example show-grid-scol">
  <div class="scontainer">
    <div class="line">
      <div class="x:scol-4"></div>
      <div class="x:scol-4"></div>
      <div class="x:scol-4"></div>
    </div>
  </div>
</div>

...