Prid’x : The Flexbox Based Padding Grid

Prid’x is an evolution of Prid' a light and simple CSS stylesheet, now Flexbox based and Sass powered. It is a fluid flex based responsive CSS grid, to help you start any responsive web design project.

I use Prid’x in all my web design projects.

Grid Layout

Prid’x is based on a 12 columns layout. The gutters are managed with the columns' padding.

Basic grids

Build your grids with rows and columns just like this:

						<div class="row">
						
						  	<div class="col-12"></div>
						  	<div class="col-6"></div>
						  	<div class="col-6"></div>
						      ...
						
						</div>							
					

Nested grids

Grids can be nested, you just have to add a new .row with the class .nested inside the column.

						<div class="col-8">
						
						  	<div class="row nested">
						    		<div class="col-6"></div>					
						    		<div class="col-6"></div>					
						    		<div class="col-4"></div>					
						    		<div class="col-4"></div>					
						    		<div class="col-4"></div>					
						  	</div>
							
						</div>
						
						<div class="col-4">
						
						  	<div class="row nested">
						    		<div class="col-6"></div>
						    		<div class="col-6"></div>
						  	</div>
							
						</div>
						
					

Offsets

You can add some left or right margins if needed. For example, add the class .left-1 if you want a 1 column left margin, or .right-2 if you want a 2 columns right-margin.

						
						<div class="col-1"></div>
						<div class="col-3 left-2"></div>
						<div class="col-2 right-1"></div>
						<div class="col-3"></div>
						
					

Mixed widths

Columns can be set to a different width under a particular breakpoint. For example, use the class small-6 to set the width of the column to 50% for small widths. For medium widths you can use mid-6. Breakpoints can of course be customized. (Resize your browser window)

						<div class="row">
						 	<div class="col-3 mid-6 small-4"></div>
						 	<div class="col-3 mid-6 small-8"></div>
						</div>
					

Grids without padding

Use the class .no-padding if you want to get rid of the column's margins.

						<div class="col-3 no-padding"></div>
					

Flex magic

Use specific classes on .row to add some flex magic to your css grids (with the align-items and the justify-content properties). For example:

						<div class="row x-center">
					

The .x-center class:

The .x-between class:

The .x-around class:

The .x-left class:

The .x-right class:

The .x-middle class:

The .x-top class:

The .x-bottom class:

The .x-stretch class:

Get Prid’x

You can download Prid’x files (for development and production) on the GitHub repository.

Prid’x on GitHub