- Notifications
You must be signed in to change notification settings - Fork1
CSS Grid layout snippets for Sublime Text
License
Pushedskydiver/sublime-text-css-grid-snippets
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 likedg fordisplay: grid; andgg forgrid-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 browsers ready to start shipping it very soon.
For more information about grid and how to learn it, checkout outgridbyexample.com, created byRachel Andrew who has been at the forefront of grid layout research.
Issues and Pull Requests are welcome.
About
CSS Grid layout snippets for Sublime Text
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.