mlut documentation

4.1.4 #css_lib.helpers.row Row

Helper for creating layouts. Suitable for columns, cards and horizontal lists. By default, flexbox technology is used for layouts.

Parts of the layout within a row are created using the elements:

row__col
row__item

Rows can be put into each other an unlimited number of times.

Row contains CSS counter named ml-row-item.

It not included in the default mlut distributive because partially based on the legacy grid system. It is recommended to use the CSS grid utilities instead.

Example

sm_W2gc md_W3gc

Et molestie ac, massa, eget egestas purus viverra?

sm_W2gc md_W4gc

Et molestie ac, ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra?

sm_W2gc md_W5gc

Et molestie ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra?

Markup: ../examples/css_lib-helpers/row/row.html

<div class="row">
	<div class="row__col sm_W2gc md_W3gc">
		<h3>sm_W2gc md_W3gc</h3>
		<p>Et molestie ac, massa, eget egestas purus viverra?</p>
	</div>
	<div class="row__col sm_W2gc md_W4gc">
		<h3>sm_W2gc md_W4gc</h3>
		<p>Et molestie ac, ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra?</p>
	</div>
	<div class="row__col sm_W2gc md_W5gc">
		<h3>sm_W2gc md_W5gc</h3>
		<p>Et molestie ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra?</p>
	</div>
</div>

Source: ../packages/core/src/sass/css/helpers/row.scss, line 3