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 🙂