• DocumentationDocs

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

Follow the creator

Join the community