Welcome to On the Grid!

It's never been so easy to make beautiful layouts using pure CSS.

CSS Grid is a powerful layout tool from CSS. This site serves as a sandbox to see how it works, as well as a tutorial if you're not familiar with Grid. Skip the constant minor tweaking and refreshing. Test your properties out in the sand box and then click 'get the code' to copy and paste it into your own project.
As of March 2017, CSS grid is supported by all major browsers.
See the Code

ACCKKK! Who designed this website?

They obviously don't know how easy it is to layout a website using CSS Grid!

The most important part of grid is laying elements in positions using 'grid-row' and 'grid-column'.

You can see in the body {} selector that we've established a 10x10 grid. Go ahead and click the 'Toggle Grid View' button to see.
Your job is to change the column and row start and end positions of each element to layout the page!

Toggle Grid View

Quick Tips and Hang Ups

The size of grid items is based on its column and row start and end positions. Learn more in the tutorial.

Justify and Align variations don't always behave how you'd expect. Remember this: 'items' places grid items in relation to their row/column, while 'content' treats all the items as one entity with a relationship to the grid.

Grid has an autoplacement algorithm that adds new items in the next available space based on the flow of the grid (flow: row is default). If you explicitly place certain items, the algorithm will place remaining items in the first available spot it can find. Try placing a larger item right in the middle of the grid, and then adding and taking away other items!