Show Menu
Cheatography
  1. Home >
  2. Programming >

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>
   
 

Metadata

  • Languages:
  • Published: 25th September, 2019
  • Rated: 4 out of 5 stars based on 1 ratings

Favourited By

charaf ess

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
          Five ways to center DIV element in CSS Cheat Sheet