mlut documentation

4.1.4.1 #css_lib.helpers.row.row__col row__col

Toggle example guides Toggle HTML markup

The main element for creating columns in layout. By default, it stretches the entire width of the container. The columns have gutters on the sides and bottom.

The gutters are implemented using the margin and CSS custom properties.

Column width is set using W utility. See example above. The formulas for calculating the width and offset for the column are stored in the custom properties. In --ml-gscf for W and --ml-gsof for Ml utility. These formulas:

--ml-gscf: calc(var(--ml-gsc) / var(--ml-gscc) * 100% - var(--ml-gsfd, var(--ml-gg)) * 2);
--ml-gsof: calc(var(--ml-gso) / var(--ml-gscc) * 100% + var(--ml-gsfd, var(--ml-gg)));

--ml-gsc or --ml-gso is the value of the width or offset in the grid columns. This is a custom property of the utility.
--ml-gscc - the number of columns in the grid system. This is a global custom property that can be changed on any DOM node.
--ml-gsfd - variable is equal to the gutter if the gutter at the columns is created using margin. In row__col is equal 1gg.
Some of these variables can be changed using custom utilities.

You can create nested layouts with a mix of row and row__col on the same DOM node. If you don't need double fields in the nested row, use the mix with the row__item. See example below.

Example

Parent .md_W9gc

this .md_W3gc

Parent .md_W9gc

this .md_W4gc

Parent have double gutter

this .md_W5gc

.md_W3gc

Similar mix with row__item:

Parent .md_W9gc

this .md_W3gc

Parent .md_W9gc

this .md_W4gc

Parent without double gutter

this .md_W5gc

.md_W3gc

Markup: ../examples/css_lib-helpers/row/row__col.html
<div class="row">
	<div class="row__col row test-row sm_W4gc md_W9gc">
		<div class="row__col sm_W2gc md_W3gc">
			<h3>Parent .md_W9gc</h3>
			<p>this .md_W3gc</p>
		</div>
		<div class="row__col sm_W2gc md_W4gc">
			<h3>Parent .md_W9gc</h3>
			<p>this .md_W4gc</p>
		</div>
		<div class="row__col sm_W2gc md_W5gc">
			<h3>Parent have double gutter</h3>
			<p>this .md_W5gc</p>
		</div>
	</div>
	<div class="row__col sm_W2gc md_W3gc">
		<h3>.md_W3gc</h3>
	</div>
</div>
<p><b>Similar mix with row__item:</b></p>
<div class="row -Mx0">
	<div class="row__item row -Mx0 test-row sm_W4gc md_W9gc">
		<div class="row__col sm_W2gc md_W3gc">
			<h3>Parent .md_W9gc</h3>
			<p>this .md_W3gc</p>
		</div>
		<div class="row__col sm_W2gc md_W4gc">
			<h3>Parent .md_W9gc</h3>
			<p>this .md_W4gc</p>
		</div>
		<div class="row__col sm_W2gc md_W5gc">
			<h3>Parent without double gutter</h3>
			<p>this .md_W5gc</p>
		</div>
	</div>
	<div class="row__col sm_W2gc md_W3gc">
		<h3>.md_W3gc</h3>
	</div>
</div>
Source: ../packages/core/src/sass/css/helpers/row.scss, line 23