On The Grid

A CSS Grid Playground

grid setup

Number of Rows: Number of Columns: Number of grid items:

.wrapper properties

Resize Rows / Columns:

Row Number: Row Size:
Column Number: Column Size:
grid-auto-flow:
grid-row-gap: grid-column-gap:
justify-items: align-items:
justify-content: align-content:

.grid-item properties

(click grid item to select)

grid-column: / grid-row: /
justify-self: align-self:

On The Grid

Css Grid Tutorial

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
body {
  display: grid
  grid-template-columns: repeat(10, 1fr)
  grid-template-rows: repeat(10, 1fr)
}
header {
  grid-column: 
  grid-row: 
}
main {
  
  
}
aside {
  
  
}
footer {
  
  
}
nav {
  
  
}
cause
I'm
going
down
to
Strawberry
Fields

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

Looking for help? 

Tips
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrapper {
          display: grid
          grid-template-columns: 
          grid-template-rows: 
          grid-auto-flow: 
          grid-gap:  
          justify-items: 
          align-items: 
        }

  .grid-item {
          grid-row: < row-start > / < row-end >
          grid-column: < column-start > / < column-end >
          align-self: < stretch / start / end / center >
          justify-self: < stretch / start / end / center >
        }

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

eric windmill | github

You're a Grid Master!

New lessons are added all the time, be sure to check back!

For now, checkout my site for more useful tools!

Back to the Playground!