Grid in CSS

What is Grid?

Grid is a layout module which allows us to create a two dimensional layout system with rows and columns. By using grid layout module we can easily design web pages without using floats and positioning. A grid layout consists of a parent element, with one or more child elements.

Properties for the Parent (Grid Container)

• display: It is used to define the element as grid container.

/* Syntax */
.container{
  display: grid;
}

• grid-template-rows: It is used to specify the size of the rows in a grid layout.

• grid-template-columns: It is used to specify the size of the columns in a grid layout.

• grid-template-areas: It is used to specify how to display columns and rows, using named grid items.

• grid-template: It is a shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties.

• grid-column-gap: It is used to specify the gap between the columns.

• grid-row-gap: It is used to specify the gap between the rows.

• grid-gap: It is a shorthand property for the row-gap and the column-gap properties.

• justify-items: Its is used to align grid items in a row. start, end, center and stretch are the possible values for this property.

• align-items: Its is used to align grid items in a column. start, end, center, stretch and baseline are the possible values for this property.

• justify-content: This property is used to align the grid in a row. start, end, center, stretch, space-around, space-between, space-evenly are the possible values of this property.

• align-content: This property is used to align the grid in a column. start, end, center, stretch, space-around, space-between, space-evenly are the possible values of this property.

• grid-auto-columns: It is used to specify a default column size.

• grid-auto-rows: It is used to specify a default row size.

• grid-auto-flow: It is used to specify how auto-placed items are inserted in the grid.

• grid: It is a shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties.

Properties for the Children (Grid Items)

• grid-column-start: It is used to specify where to start the grid item.

• grid-column-end: It is used to specify where to end the grid item.

• grid-row-start: It is used to specify where to start the grid item.

• grid-row-end: It is used to specify where to end the grid item.

• grid-column: It is a shorthand property for the grid-column-start and the grid-column-end properties.

• grid-row: It is a shorthand property for the grid-row-start and the grid-row-end properties.

• grid-area: It either specifies a name for the grid item, or this property is a shorthand.

Thanks for reading. Happy Learning 🙂