Shorthand snippets for CSS, SCSS, Sass, and Less.
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.
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;.
| 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 |
| 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 |
If you are new or have never heard of CSS Grid before, then now is the time to learn, with modern browsers now supporting the layout method.
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.
Issues and Pull Requests are welcome.