PostCSS Grid

Cherry grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

<!--- Grid Container -->
<div class="container">
	<!--- Grid Row -->
	<div class="row">
		<!--- Grid Columns -->
		<div class="col-xs-6 col-lg-4">
			<div>Child 1</div>
		</div>
		<div class="col-xs-6 col-lg-4">
			<div>Child 2</div>
		</div>
		<div class="col-xs-12 col-lg-4">
			<div>Child 3</div>
		</div>
	</div>
</div>

Container and generic classes

Below you can find the main container class name as well as global classes for aligning text.

Row classes

Below you can find the class names available for the row container.

Columns classes

All column class names are listed below.