CSS Grid Cheatsheet

Photo by Lee Campbell on Unsplash

• grid-column-start: Specifies a grid item’s start position within the grid columns.
• grid-column-end: Specifies a grid item’s end position within the grid columns.

When grid-column-start is used alone, the grid item by default will span exactly one column. However, you can extend the item across multiple columns by adding the grid-column-end property.

• grid-column: Shorthand property that can accept both values at once, separated by a slash. Ex) grid-column : 2/4;

Instead of defining a grid item based on the start and end positions of the grid lines, you can define it based on your desired column width using the span keyword. Keep in mind that span only works with positive values.

One of the things that sets CSS grids apart from flexbox is that you can easily position items in two dimensions: columns and rows. grid-row-start works much like grid-column-start except along the vertical axis.

• grid-row-start: Specifies a grid item’s start position within the grid rows.
• grid-row-end: Specifies a grid item’s end position within the grid rows.
• grid-row: Specifies a grid item’s position within the grid rows.

If typing out both grid-column and grid-row is too much for you, there’s yet another shorthand for that.

• grid-area: Specifies a grid item’s position and size within the grid. It accepts four values separated by slashes: grid-row-start, grid-column-start, grid-row-end, followed by grid-column-end.

grid-area : 1/ 1/ 3/ 6;

If grid items aren’t explicitly placed with grid-area, grid-column, grid-row, etc., they are automatically placed according to their order in the source code. We can override this using the order property, which is one of the advantages of grid over table-based layout. By default, all grid items have an order of 0, but this can be set to any positive or negative value, similar to z-index.

• order: Specifies the order of the grid item.
• grid-template-columns: Specifies the sizing and names of the grid’s columns.
• grid-template-rows: Specifies the sizing and names of the grid’s rows.

grid-template-columns : 20% 20% 20% 20% 20%;
grid-template-columns : repeat(5, 20%);
grid-template-columns: 1fr 5fr;

• grid-template: is a shorthand property that combines grid-template-rows and grid-template-columns.

grid-template: 50% 50% / 200px;

will create a grid with two rows that are 50% each, and one column that is 200 pixels wide.