Grid cheatsheet

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.

Terminology

Grid container

Property for defining the element as grid container:

Define rows and columns of the grid:

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Grid items

Shortcuts for properties above:

Gives an item a name so that it can be referenced by a template created with the grid-template-areas property. 

Aligns a grid item inside a cell along the row axis:

References

Codepen sandbox: https://codepen.io/mikkqu/pen/MPXNaK

External guide: https://css-tricks.com/snippets/css/complete-guide-grid/

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid