CSS Grid layout snippets for Sublime Text
Switch branches/tags
Nothing to show
Clone or download
Latest commit a13aa12 Mar 6, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
snippets Update snippet for grid-template-areas Mar 6, 2017
.gitignore Initial commit Mar 6, 2017
LICENSE.md Initial commit Mar 6, 2017
README.md Update README.md Mar 6, 2017
package.json Initial commit Mar 6, 2017


CSS Grid Layout Snippets

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


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


Issues and Pull Requests are welcome.