CSS Grid layout snippets for Atom
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
snippets
.gitignore
LICENSE.md
README.md
package.json
preview.gif

README.md

CSS Grid Layout Snippets

apm apm apm

An Atom Package - Atom.io : GitHub

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

Preview

CSS grid snippets in atom

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.