Skip to content

Pushedskydiver/sublime-text-css-grid-snippets

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CSS Grid Layout Snippets

Shorthand snippets for CSS, SCSS, Sass, and Less.

Preview

CSS grid snippets in sublime text

What is CSS Grid Layout?

To put it simply CSS Grid Layout (aka "Grid"), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. It hasn't been added yet to modern browsers but is expected to be added within the coming months.

What's Included?

You can see the list of the CSS grid snippets in the tables below. I have organized the tables into grid container and grid item snippets. Alternatively, once you install the package you can view the snippets in the Settings View. Basically, it's snippets like dg for display: grid; and gg for grid-gap: 20px;.

Grid Container Snippets

Property Snippet
align-content ac
align-content: center; acc
align-content: end; ace
align-content: start; acs
align-content: space-around; acsa
align-content: space-between; acsb
align-content: space-evenly; acse
align-items ai
align-items: center; aic
align-items: end; aie
align-items: start; ais
align-items: stretch; aistr
display: inline-grid; disig
display: grid; disg
display: subgrid; dissg
grid-auto-columns gac
grid-auto-rows gar
grid-auto-flow gaf
grid-auto-flow: column; gafc
grid-auto-flow: dense; gafd
grid-auto-flow: row; gafr
grid-column-gap gcg
grid-gap gg
grid-row-gap grg
grid-template-areas gta
grid-template-columns gtc
grid-template-rows gtr
justify-content jc
justify-content: center; jcc
justify-content: end; jce
justify-content: start; jcs
justify-content: space-around; jcsa
justify-content: space-between; jcsb
justify-items ji
justify-items: center; jic
justify-items: end; jie
justify-items: start; jis
justify-items: stretch; jistr

Grid Item Snippets

Property Snippet
align-self als
align-self: center; alsc
align-self: end; alse
align-self: start; alss
align-self: stretch; alsstr
grid-area gra
grid-column gc
grid-column-end gce
grid-column-start gcs
grid-row gr
grid-row-start grs
grid-row-end gre
justify-self js
justify-self: center; jsc
justify-self: end; jse
justify-self: start; jss
justify-self: stretch; jsstr

Want To Learn CSS Grid?

If you are new or have never heard of CSS Grid before, then now is the time to learn, with browsers ready to start shipping it very soon.

For more information about grid and how to learn it, checkout out gridbyexample.com, created by Rachel Andrew who has been at the forefront of grid layout research.

Grid Layout Learning Resources

Notes

Issues and Pull Requests are welcome.