| Grid Template Columns | Specifies the size of the columns, and how many columns are in a grid layout. |
d-template-columns: 40px 50px auto 50px 40px |
|---|
| Grid Template Rows | Specifies the size of the rows in a grid layout. |
grid-template-rows: 25% 100px auto |
|---|
| Grid Template Areas | Specifies how to display columns and rows, using named grid items. |
grid-template-areas: "a b c" | none |
|---|
| Grid Template | Property for defining grid columns, rows, and areas. |
grid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1fr |
|---|
| Grid Column Gap | Sets the size of the gap between columns. |
grid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1fr |
|---|
| Grid Row Gap | It sets the size of the gap between an element's grid rows. The space between rows is known as the row gap. The gap between an element's grid rows is controlled by this attribute. |
grid-row-gap: 10px |
|---|
| Justify Items | Defines the default justify-self for all items of the box. |
justify-items: start | end | center | stretch |
|---|
| Align Items | Sets the align-self value on all direct children as a group. |
align-items: start | end | center | stretch |
|---|
| Justify Content | Specifies how the browser distributes space between and around content. |
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly |
|---|
| Align Content | Distribution of space between and around content items. |
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly |
|---|
| Grid Auto Columns | Specifies the size of an implicitly-created grid column track or pattern of tracks. |
grid-auto-columns: 100px | max-content | min-content |
|---|
| Grid Auto Rows | CSS property specifies the size of an implicitly-created grid row track or pattern of tracks. |
grid-auto-rows: 100px | max-content | min-content |
|---|
| Grid Auto Flow | Property controls how the auto-placement algorithm works. |
grid-auto-flow: row | column | row dense | column dense |
|---|
| Grid Column Start | CSS property specifies a grid item’s start position within the grid column. |
grid-column-start: 2 | areaname | span 2 | span areaname | auto |
|---|
| Grid Column End | Specifies a grid item’s start position within the grid column by contributing a line, a span. |
grid-column-end: 2 | areaname | span 2 | span areaname | auto |
|---|
| Grid Row Start | A grid item’s start position within the grid row by contributing a line. |
grid-row-start: 2 | areaname | span 2 | span areaname | auto |
|---|
| Grid Row End | Specifies a grid item’s end position within the grid row by contributing a line. |
grid-row-end: 2 | areaname | span 2 | span areaname | auto |
|---|
| Grid Column | Specifies a grid item's size and location within a grid column by contributing a line. |
grid-column: 3 / span 2 |
|---|
| Grid Row | Specifies a grid item’s size and location within the grid row. |
grid-row: 3 / span 2 |
|---|
| Justify Self | Sets the way a box is justified inside its alignment container along the appropriate axis. |
justify-self: start | end | center | stretch |
|---|
| Align Self | Overrides a grid or flex item's align-items value. |
align-self: start | end | center | stretch |
|---|
