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.


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:


Codepen sandbox:

External guide: