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>

🖥 Desktop

Child 1

Child 2

Child 3

📱 Mobile

Child 1

Child 2

Child 3

Container and generic classes

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

Class NameDescription
.containerMain container
.container.fluidExtend container width to max allowed
.text-align-rightAlign text to right
.text-align-centerAlign text to center
.text-align-leftAlign text to left

Row classes

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

Class NameDescription
.rowRow container for the columns
.gutter-defaultDefault gutter space for the Row container
.gutter-mediumMedium gutter space for the Row container
.gutter-bigBig gutter space for the Row container
.gutter-xs-defaultDefault row gutter for XS media query
.gutter-xs-mediumMedium row gutter for XS media query
.gutter-xs-bigBig row gutter for XS media query
.gutter-sm-defaultDefault row gutter for SM media query
.gutter-sm-mediumMedium row gutter for SM media query
.gutter-sm-bigBig row gutter for SM media query
.gutter-md-defaultDefault row gutter for MD media query
.gutter-md-mediumMedium row gutter for MD media query
.gutter-md-bigBig row gutter for MD media query
.gutter-lg-defaultDefault row gutter for LG media query
.gutter-lg-mediumMedium row gutter for LG media query
.gutter-lg-bigBig row gutter for LG media query
.gutter-xl-defaultDefault row gutter for XL media query
.gutter-xl-mediumMedium row gutter for XL media query
.gutter-xl-bigBig row gutter for XL media query
.gutter-xxl-defaultDefault row gutter for XXL media query
.gutter-xxl-mediumMedium row gutter for XXL media query
.gutter-xxl-bigBig row gutter for XXL media query
.gutter-xxxl-defaultDefault row gutter for XXXL media query
.gutter-xxxl-mediumMedium row gutter for XXXL media query
.gutter-xxxl-bigBig row gutter for XXXL media query

Columns classes

All column class names are listed below.

Class NameDescription
.col-11 Column layout
.col-22 Columns layout
.col-33 Columns layout
.col-44 Columns layout
.col-55 Columns layout
.col-66 Columns layout
.col-77 Columns layout
.col-88 Columns layout
.col-99 Columns layout
.col-1010 Columns layout
.col-1111 Columns layout
.col-1212 Columns layout
.col-autoAuto Column layout
.col-order-firstOrder column as first
.col-order-lastOrder column as last
.col-xs-11 Column layout on XS
.col-xs-22 Columns layout on XS
.col-xs-33 Columns layout on XS
.col-xs-44 Columns layout on XS
.col-xs-55 Columns layout on XS
.col-xs-66 Columns layout on XS
.col-xs-77 Columns layout on XS
.col-xs-88 Columns layout on XS
.col-xs-99 Columns layout on XS
.col-xs-1010 Columns layout on XS
.col-xs-1111 Columns layout on XS
.col-xs-1212 Columns layout on XS
.col-xs-autoAuto Column layout on XS
.col-xs-order-firstOrder column as first on XS
.col-xs-order-lastOrder column as last on XS
.col-sm-11 Column layout on SM
.col-sm-22 Columns layout on SM
.col-sm-33 Columns layout on SM
.col-sm-44 Columns layout on SM
.col-sm-55 Columns layout on SM
.col-sm-66 Columns layout on SM
.col-sm-77 Columns layout on SM
.col-sm-88 Columns layout on SM
.col-sm-99 Columns layout on SM
.col-sm-1010 Columns layout on SM
.col-sm-1111 Columns layout on SM
.col-sm-1212 Columns layout on SM
.col-sm-autoAuto Column layout on SM
.col-sm-order-firstOrder column as first on SM
.col-sm-order-lastOrder column as last on SM
.col-md-11 Column layout on MD
.col-md-22 Columns layout on MD
.col-md-33 Columns layout on MD
.col-md-44 Columns layout on MD
.col-md-55 Columns layout on MD
.col-md-66 Columns layout on MD
.col-md-77 Columns layout on MD
.col-md-88 Columns layout on MD
.col-md-99 Columns layout on MD
.col-md-1010 Columns layout on MD
.col-md-1111 Columns layout on MD
.col-md-1212 Columns layout on MD
.col-md-autoAuto Column layout on MD
.col-md-order-firstOrder column as first on MD
.col-md-order-lastOrder column as last on MD
.col-lg-11 Column layout on LG
.col-lg-22 Columns layout on LG
.col-lg-33 Columns layout on LG
.col-lg-44 Columns layout on LG
.col-lg-55 Columns layout on LG
.col-lg-66 Columns layout on LG
.col-lg-77 Columns layout on LG
.col-lg-88 Columns layout on LG
.col-lg-99 Columns layout on LG
.col-lg-1010 Columns layout on LG
.col-lg-1111 Columns layout on LG
.col-lg-1212 Columns layout on LG
.col-lg-autoAuto Column layout on LG
.col-lg-order-firstOrder column as first on LG
.col-lg-order-lastOrder column as last on LG
.col-xl-11 Column layout on XL
.col-xl-22 Columns layout on XL
.col-xl-33 Columns layout on XL
.col-xl-44 Columns layout on XL
.col-xl-55 Columns layout on XL
.col-xl-66 Columns layout on XL
.col-xl-77 Columns layout on XL
.col-xl-88 Columns layout on XL
.col-xl-99 Columns layout on XL
.col-xl-1010 Columns layout on XL
.col-xl-1111 Columns layout on XL
.col-xl-1212 Columns layout on XL
.col-xl-autoAuto Column layout on XL
.col-xl-order-firstOrder column as first on XL
.col-xl-order-lastOrder column as last on XL
.col-xxl-11 Column layout on XXL
.col-xxl-22 Columns layout on XXL
.col-xxl-33 Columns layout on XXL
.col-xxl-44 Columns layout on XXL
.col-xxl-55 Columns layout on XXL
.col-xxl-66 Columns layout on XXL
.col-xxl-77 Columns layout on XXL
.col-xxl-88 Columns layout on XXL
.col-xxl-99 Columns layout on XXL
.col-xxl-1010 Columns layout on XXL
.col-xxl-1111 Columns layout on XXL
.col-xxl-1212 Columns layout on XXL
.col-xxl-autoAuto Column layout on XXL
.col-xxl-order-firstOrder column as first on XXL
.col-xxl-order-lastOrder column as last on XXL
.col-xxxl-11 Column layout on XXXL
.col-xxxl-22 Columns layout on XXXL
.col-xxxl-33 Columns layout on XXXL
.col-xxxl-44 Columns layout on XXXL
.col-xxxl-55 Columns layout on XXXL
.col-xxxl-66 Columns layout on XXXL
.col-xxxl-77 Columns layout on XXXL
.col-xxxl-88 Columns layout on XXXL
.col-xxxl-99 Columns layout on XXXL
.col-xxxl-1010 Columns layout on XXXL
.col-xxxl-1111 Columns layout on XXXL
.col-xxxl-1212 Columns layout on XXXL
.col-xxxl-autoAuto Column layout on XXXL
.col-xxxl-order-firstOrder column as first on XXXL
.col-xxxl-order-lastOrder column as last on XXXL
PostCSS SpacingPostCSS Breakpoints