CSS Grid Cheatsheet

Defines the element as a grid container

.container { display: grid; }

Defines the columns of the grid with a space-separated list of values

grid-template-columns: 200px 1fr 2fr;

Defines the rows of the grid with a space-separated list of values

grid-template-rows: 100px auto 200px;

Defines named grid areas using a visual ASCII-art style syntax

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

Shorthand for grid-template-rows, grid-template-columns, and grid-template-areas

grid-template: 100px 1fr / 200px 1fr;

Sets the gap between rows and columns

gap: 20px 10px;

Sets the gap between grid rows

row-gap: 15px;

Sets the gap between grid columns

column-gap: 20px;

Aligns grid items along the inline (row) axis within their cell

justify-items: center;

Aligns grid items along the block (column) axis within their cell

align-items: start;

Shorthand for align-items and justify-items

place-items: center start;

Aligns the entire grid along the inline (row) axis within the container

justify-content: space-between;

Aligns the entire grid along the block (column) axis within the container

align-content: center;

Shorthand for align-content and justify-content

place-content: center space-evenly;

Specifies the size of implicitly created column tracks

grid-auto-columns: 100px;

Specifies the size of implicitly created row tracks

grid-auto-rows: minmax(100px, auto);

Controls how auto-placed items are inserted in the grid

grid-auto-flow: row dense;

Shorthand for all grid container properties

grid: auto-flow dense / 1fr 1fr;

Determines where a grid item starts on the column axis

grid-column-start: 2;

Determines where a grid item ends on the column axis

grid-column-end: span 2;

Shorthand for grid-column-start and grid-column-end

grid-column: 1 / 3;

Determines where a grid item starts on the row axis

grid-row-start: 1;

Determines where a grid item ends on the row axis

grid-row-end: span 3;

Shorthand for grid-row-start and grid-row-end

grid-row: 2 / 4;

Assigns an item to a named area or specifies its position

grid-area: header;

Aligns a single grid item along the inline (row) axis

justify-self: end;

Aligns a single grid item along the block (column) axis

align-self: center;

Shorthand for align-self and justify-self

place-self: center end;

Represents a fraction of the available space in the grid container

grid-template-columns: 1fr 2fr 1fr;

Repeats a track pattern a specified number of times

grid-template-columns: repeat(3, 1fr);

Defines a size range between min and max values

grid-template-columns: minmax(200px, 1fr);

Creates as many tracks as fit in the container, including empty tracks

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Creates as many tracks as fit, collapsing empty tracks to zero

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Clamps size to content up to a maximum value

grid-template-columns: fit-content(300px) 1fr;

Size based on the minimum content size of the track items

grid-template-columns: min-content 1fr;

Size based on the maximum content size of the track items

grid-template-columns: max-content 1fr;

Creates an equal three-column grid with consistent gaps

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Creates a responsive grid that adjusts column count based on container width

.responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Classic header-sidebar-main-sidebar-footer layout using named areas

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
}

Fixed sidebar with flexible main content area

.sidebar-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
}

Centers a single item both horizontally and vertically

.centered {
  display: grid;
  place-items: center;
  height: 100vh;
}

Makes an item span from first to last column line

.full-width {
  grid-column: 1 / -1;
}