Show Menu

Css Grid Cheat Sheet by

css     grid

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>

Download the Css Grid Cheat Sheet

1 Page
//media.cheatography.com/storage/thumb/idvali_css-grid.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

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