4.1.2 #css_lib.helpers.gs-debug Grid-system debug
Helper for debugging layouts that built with grid system. It displays a grid system columns and gutters in the background of the container. The grid system are generated depending on the settings.
There may be minor inaccuracies in the drawing of the grid, because the grid is generated with CSS linear-gradient(). For gutters calculation are used CSS custom properties.
It not included in the default mlut distributive.
Example
1
2
3
Markup: ../examples/css_lib-helpers/grid-debug/grid-debug.html
<div class="row gs-debug">
<div class="row__col sm_W1gc W1c_md">
<div class="test-content">
<h3>1</h3>
</div>
</div>
<div class="row__col sm_W1gc md_W2gc">
<div class="test-content">
<h3>2</h3>
</div>
</div>
<div class="row__col sm_W1gc md_W8gc">
<div class="test-content">
<h3>3</h3>
</div>
</div>
</div>
Source:
../packages/core/src/sass/css/helpers/gs-debug.scss, line 3