In the previous article, we have learnt about the basics of Grid. In this article, we will learn about the properties of the grid in CSS.

Properties of the Parent(Grid Container)

display

The element is defined as a grid container, and a new grid formatting context is created for its contents.

Values:

• grid: creates a grid at the block level
• inline-grid: creates a grid at the inline-level

grid-template-columns & grid-template-rows

A space-separated list of values defining the grid’s columns and rows. The track size is represented by the values, and the space between them is the grid line.

Values:

• <track-size>: can be a number of pixels, a percentage, or a fraction of the grid’s free space (using the fr unit)
• <line-name>: any arbitrary name you want.

grid-template-areas

It defines a grid template by referencing the names of the grid areas specified with the grid-area property. When the name of a grid area is repeated, the content spans those cells. An empty cell is indicated by a period. The syntax itself serves as a visual representation of the grid’s structure.

Values:

• grid-area-name: the name of a grid area defined by grid-area-name
• . : a period denotes an empty grid cell
• none: there are no defined grid areas

grid-template

Grid-template-rows, grid-template-columns, and grid-template-areas can all be set in a single declaration using this shorthand.

Values:

• none: resets the values of all three properties to their defaults.
• <grid-template-rows>/<grid-template-columns>: sets grid-template columns and grid-template rows to their respective values and grid-template-areas to none.

column-gap/row-gap or grid-column-gap/grid-row-gap

The size of the grid lines is specified using this property. It’s similar to adjusting the width of the gutters between columns/rows.

Values:

• <line-size>: a length value

gap or grid-gap

It is a shorthand for row-gap and column-gap.

Values:

• <grid-row-gap><grid-column-gap>: length values

justify-items

In contrast to align-items, which align grid items along the block (column) axis, this command aligns grid items along the inline (row) axis. This value is applied to all grid items that are contained within the container.

Values:

• start: aligns items so that they are flush with the cell’s start edge.
• end: aligns items so that they are flush with the cell’s end edge.
• center: places items in the cell’s center.
• stretch: fills the cell to its full width (this is the default)

align-items

In contrast to justify-items, which align grid items along the inline (row) axis, this command aligns grid items along the block (column) axis. This value is applied to all grid items that are contained within the container.

Values:

• start: aligns items so that they are flush with the cell’s start edge.
• end: aligns items so that they are flush with the cell’s end edge.
• center: places items in the cell’s center.
• stretch: fills the cell to its full width (this is the default)

place-items

In a single declaration, place-items set both the align-items and justify-items properties.

Values:

• <align-items> / <justify-items>: The first value aligns the items, while the second value justifies them. The first value is assigned to both properties if the second value is omitted.

The place-items shorthand property is supported by all major browsers except Edge.

This can be extremely useful for multi-directional centering in a short time.

justify-content

It’s possible that the total size of your grid is smaller than the grid container. If all of your grid items are sized in non-flexible units like px, this could happen. In this case, you can adjust the grid’s alignment within the grid container. In contrast to align-content, which aligns the grid along the block (column) axis, this property aligns the grid along the inline (row) axis.

Values:

• start: aligns the grid to be flush with the grid container’s start edge
• end: aligns the grid to be flush with the grid container’s end edge
• center: aligns the grid in the grid container’s center
• stretch: allows the grid to fill the entire width of the grid container space by resizing the grid items.
• space-around: creates an even amount of space between each grid item, with half-sized spaces at the extremes.
• space-between: adds an equal amount of space between each grid item, leaving no space at the far ends.
• space-evenly: leaves an equal amount of space between each grid item, even at the far ends

align-content

It’s possible that the total size of your grid is smaller than the grid container. If all of your grid items are sized in non-flexible units like px, this could happen. In this case, you can adjust the grid’s alignment within the grid container. In contrast to justify-content, which aligns the grid along the inline (row) axis, this property aligns the grid along the block (column) axis.

Values:

• start: aligns the grid to be flush with the grid container’s start edge
• end: aligns the grid to be flush with the grid container’s end edge
• center: aligns the grid in the grid container’s center
• stretch: allows the grid to fill the entire width of the grid container space by resizing the grid items.
• space-around: creates an even amount of space between each grid item, with half-sized spaces at the extremes.
• space-between: adds an equal amount of space between each grid item, leaving no space at the far ends.
• space-evenly: leaves an equal amount of space between each grid item, even at the far ends

place-content

In a single declaration, place-content set both the align-content and justify-content properties.

Values:

• <align-content> / <justify-content>: The first value aligns the content, while the second value justifies them. The first value is assigned to both properties if the second value is omitted.

The place-content shorthand property is supported by all major browsers except Edge.

grid-auto-columns/grid-auto-rows

Sets the size of any grid tracks that are automatically generated (aka implicit grid tracks). When a grid item is placed outside of the explicit grid or there are more grid items than cells in the grid, implicit tracks are created. (See Explicit vs. Implicit Grids for more information.)

Values:

• <track-size>: can be a number of pixels, a percentage, or a percentage of the grid’s free space (using the fr unit)

grid-auto-flow

If you have grid items that you don’t place explicitly on the grid, the auto-placement algorithm takes over and places them for you. The auto-placement algorithm is controlled by this property.

Values:

• row: instructs the auto-placement algorithm to fill in each row in turn, as needed (default)
• column: instructs the auto-placement algorithm to fill in each column in turn, adding new columns as needed
• dense: instructs the auto-placement algorithm to fill in holes in the grid earlier if smaller items appear later.

Note that the dense only affects the visual order of your items and may make them appear out of order, which is inaccessible.

grid

This is a shorthand property for setting: Grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow all in a single declaration. (Note: In a single grid declaration, you can only specify the explicit or implicit grid properties.)

Values:

• none: resets the values of all sub-properties to their defaults.
• <grid-template>: is equivalent to the grid-template shorthand.
• <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?: grid-template-rows is set to the value specified. Grid-auto-flow is set to a column if the auto-flow keyword is to the right of the slash. The auto-placement algorithm uses a “dense” packing algorithm if the dense keyword is also specified. Grid-auto-columns is set to auto if it is not specified.
• [ auto-flow && dense? ] <grid-auto-rows>? / <grid-auto-columns>: sets the value of grid-template columns to the value specified. Grid-auto-flow is set to row if the auto-flow keyword is to the left of the slash. The auto-placement algorithm uses a “dense” packing algorithm if the dense keyword is also specified. Grid-auto-rows is set to auto if it is not specified.

Properties of the Grid, Properties of the Grid, Properties of the Grid, Properties of the Grid, Properties of the Grid.

Properties of the Child(Grid items)

grid-column-start/grid-column-end/grid-row-start/grid-row-end

Refers to specific grid lines to determine the location of a grid item within the grid. The line where the item begins is grid-column-start/grid-row-start, and the line where the item ends is grid-column-end/grid-row-end.

Values:

• <line>: can be a number or a name to refer to a numbered grid line or a named grid line.
• span <number>: the item will span the number of grid tracks specified.
• span <name>: the item will span until it reaches the next line with the name specified.
• auto: denotes automatic placement, an automatic span, or a one-span default.

grid-column/grid-row

It is a shorthand property for grid-column-start + grid-column-end, and grid-row-start + grid-row-end, respectively.

Values:

• <start-line> / <end-line>: Each accepts the same values as the longhand version, including span.

grid-area

Gives an item a name so that a template created with the grid-template-areas property can refer to it. Alternatively, grid-row-start + grid-column-start + grid-row-end + grid-column-end can be shortened to grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Values:

• <name>: any name you want
• <row-start> / <column-start> / <row-end> / <column-end>: numbers or named lines

justify-self

Aligns a grid item inside a cell along the inline (row) axis (rather than the block (column) axis, as align-self does). This value is for a grid item contained within a single cell.

Values:

• start: aligns the grid item flush with the cell’s start edge
• end: aligns the grid item flush with the cell’s end edge
• center: aligns the grid item in the cell’s center
• stretch: fills the cell’s entire width (this is the default)

align-self

In contrast to justify-self, which aligns along the inline (row) axis, this command aligns a grid item inside a cell along the block (column) axis. This value is for the content contained within a single grid item.

Values:

• start: aligns the grid item flush with the cell’s start edge
• end: aligns the grid item flush with the cell’s end edge
• center: aligns the grid item in the cell’s center
• stretch: fills the cell’s entire width (this is the default)

place-self

In a single declaration, place-self sets both the align-self and justify-self properties.

Values:

• auto: The layout mode’s “default” alignment.
• <align-self> / <justify-self>: The first value determines align-self, while the second value determines justify-self. The first value is assigned to both properties if the second value is omitted.

That’s all about the Grid and Properties of the Grid in CSS.

You may like Transform in CSS | Web Development.

Hope this article will guide you to recognize all about the Properties of the Grid in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.