Show Menu
Cheatography

Css Grid Cheat Sheet by

Container

grid-t­emp­lat­e-c­olumns
10px 1fr 2fr
grid-t­emp­lat­e-rows
20% auto
grid-t­emp­lat­e-c­olumns
[first] 40px [line2] 50px [end]
grid-t­emp­lat­e-c­olumns
repeat(3, 20px)
grid-t­emp­lat­e-areas
logo title title /n aside . main
grid-c­olu­mn-gap
10px
grid-r­ow-gap
10px
grid-gap
<gr­id-­row­-ga­p> <gr­id-­col­umn­-ga­p>
justif­y-items
start | end | center | stretch
align-­items
start | end | center | stretch
place-­items
<al­ign­-it­ems> / <ju­sti­fy-­ite­ms>
 

Grid Items

grid-c­olu­mn-­start
<nu­mbe­r> | <na­me> | span <nu­mbe­r>
grid-c­olumn
<st­art­-li­ne> / <en­d-l­ine>
grid-row
<st­art­-li­ne> / <en­d-l­ine>
grid-area
<na­me> | <ro­w-s­tar­t> / <co­lum­n-s­tar­t> / <ro­w-e­nd> / <co­lum­n-e­nd>
justif­y-self
start | end | center | stretch
align-self
start | end | center | stretch
place-self
<al­ign­-se­lf> / <ju­sti­fy-­sel­f>
   

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          CSS2 Cheat Sheet
            Bootstrap Glyphicons Cheat Sheet by James Croft