CSS Grid Layout Snippets
An Atom Package - Atom.io : GitHub
Shorthand snippets for CSS, SCSS, Sass, and Less.
Preview
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 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.
Grid Layout Learning Resources
Notes
Issues and Pull Requests are welcome.