Familar with CSS float but confused by display: grid;? Get a little friendly help picking up grid with a familiar approach.

Get the hang of CSS Grid with a quick intro and familar layout. If you've used any 12-column grid system built in the recent past -- you can transfer that understanding to this new capability using Get Gridded.

How it Works

The two classes listed below can be applied to the container and direct child elements in your HTML markup.

.grid
.grid-item

In addition to those classes, you'll need to select a coloumn width. Do that by using one of the options laid out below.

.col-1
.col-2
.col-3
 ... etc. up to col-12 ...

So, your HTML might look like the following.

					
											div classs = grid  // 
				
					
					
										div classs = grid-item col-2
					
					
					
										div classs = grid-item col-2
					
					
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col