Mosaic

The mosaic grid is made upon the technology of CSS grid. It's used by applying the class l-mosaic. The grid uses 4 columns and automatic rows. Every child element of the grid is called l-mosaic__col and l-mosaic__row. The child is properly applied by adding the amount of columns and rows to the child class. An example of a child could be: l-mosaic__col-2 or l-grid__row-2.

Default

px 

			
				<section class="l-mosaic ">
	<div class="l-mosaic__col-2 l-mosaic__row-2 l-mosaic__1-1" style="background-color: #A9CB38; border: 2px solid white;">
	</div>
	<div class="l-mosaic__col-1 l-mosaic__row-1 l-mosaic__1-3" style="background-color: #575552; border: 2px solid white;">
	</div>
	<div class="l-mosaic__col-1 l-mosaic__row-1 l-mosaic__1-4" style="background-color: #4AAD52; border: 2px solid white;">
	</div>
	<div class="l-mosaic__col-2 l-mosaic__row-1 l-mosaic__2-3" style="background-color: #EAE9E8; border: 2px solid white;">
	</div>
</section>