Grid:-

CSS Grid layout is a two-dimensional grid-based layout system. Flexbox was designed for layout in one dimension either a row or a column but grid was designed for two dimensional layout of rows and columns at the same time.

Grid Container:-

The element on which display:grid is applied. It is the direct parent of all grid items.

Grid Line:-

The dividing lines that make up the structure of the grid. They can be either vertical (columns grid lines) or horizontal (row grid lines) and reside on either side of a row or a column.

Grid Item:-

The children of the grid container are called grid items.

Grid Cell:-

The space between two adjacent rows and two adjacent columns grid lines. It is a single unit of the grid.

Grid Track:-

The space between two adjacent grid lines. We can think of them as the columns or rows of the grid.

Grid Area:-

The total space is surrounded by four grid lines. A grid area may be composed of any number of grid cells.

Properties for parent (grid container):-

Display:-

Defines the element as a grid container. Values:- 1. Grid- Generates a block-level grid (occupied all available space). 2. Inline-Grid- Generates an inline-level grid (occupied only required space).

Grid-template-columns:-

It defines the number of columns in a grid layout. Values:- Auto, px, fr

Grid-template-rows:-

It defines the number of rows in a grid layout. Values:- Auto, px, fr

Grid-template-areas:-

It defines areas within the grid layout. We can name grid items by using the grid-area property and then reference the name in the grid-template-areas property. Each area is defined by apostrophes ( ' ).

Column-gap:-

It defines the gap between columns in a grid.

row-gap:-

It defines the gap between rows in a grid.

gap:-

The gap property in a grid defines the size of the gap between the rows and columns in a grid layout.

Justify-items:-

Justify-items is used to align the grid items along the row axis. The value applies to all grid items inside the container. Values:- Start- Align items to the start edge of their cell. End- Align items to the end edge of their cell. Center- Align items in the center of their cell. Stretch- Fills the whole width of the cell. (this is the default value)

Align-items:-

Align-items are used to align the grid items along the column axis. The value applies to all grid items inside the container. Values:- Start- Align items to the start edge of their cell. End- Align items to the end edge of their cell. Center- Align items in the center of their cell. Stretch- Fills the whole height of the cell. (this is the default value) Baseline- Align items along the text baseline.

Place-items:-

Place-items sets both the align-items and justify-items properties in a single declaration.

Justify-content:-

This property aligns the grid along the row axis. By using this we can move the grid content in the horizontal direction. Values:- Start- Aligns the grid to the start edge of the grid container. End- Aligns the grid to the end edge of the grid container. Center- Aligns the grid in the center of the grid container. Stretch- Resizes the grid items to allow the grid to fill the full width of the grid container. Space-around- Places an even amount of space between each grid item with some spaces on the far ends. Space-between- Places an even amount of space between each grid item with no space at the far ends. Space-evenly- Places an even amount of space between each grid item including the far ends. (creates space at the far ends)

Align-content:-

This property aligns the grid along the column axis. By using this we can move the grid content in the vertical direction. Values:- Start- Aligns the grid to the start edge of the grid container. End- Aligns the grid to the end edge of the grid container. Center- Aligns the grid in the center of the grid container. Stretch- Resizes the grid items to allow the grid to fill the full width of the grid container. Space-around- Places an even amount of space between each grid item with some spaces on the far ends. Space-between- Places an even amount of space between each grid item with no space at the far ends. Space-evenly- Places an even amount of space between each grid item including the far ends. (creates space at the far ends)

Place-content:-

Place-content sets both the align-content and justify-content properties in a single declaration.

Properties for the children (grid items):-

Grid-column-start:-

It defines on which column line the item will start.

Grid-column-end:-

It defines how many columns an item will span or on which column line the item will end.

Grid-row-start:-

It defines on which row line the item will start.

Grid-row-end:-

It defines how many rows an item will span or on which row line the item will end.

Grid-column:-

It is shorthand for grid-column-start + grid-column-end.

Grid-row:-

It is shorthand for grid-row-start + grid-row-end.

grid-area:-

It is shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Justify-self:-

Aligns a grid item inside a cell along the row axis. This value applies to a grid item inside a single cell. Values:- Start, End, Center, Stretch

Align-self:-

Aligns a grid item inside a cell along the column axis. This value applies to the content inside a single grid item. Values:- Start, End, Center, Stretch

Place-self:-

Place-self sets both the align-self and justify-self properties in a single declaration.