Grid in CSS

Grid in CSS

In this article we will learn about grid.

ยท

5 min read

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 ๐Ÿ™‚

Did you find this article valuable?

Support Imbeshat Aslam by becoming a sponsor. Any amount is appreciated!

ย