CSS grid is a powerful tool that allows for two-dimensional layouts to be created on the web. It offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
A grid layout consists of a parent element, with one or more child elements.
Properties for the Parent(Grid Container)
Defines the element as a grid container and establishes a new grid formatting context for its contents. An HTML element becomes a grid container when its
display property is set to grid or inline-grid.
display: grid | inline-grid;
Defines the columns or vertical lines of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.
Defines the row or horizontal lines of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.
Grid gaps property is used to provide spaces between each column/row
There are three properties to adjust the gap size :
1.grid-column-gap, sets the gap between the columns.
2.grid-row-gap, sets the gap between the rows
grid-gap. is a shorthand property for the grid-row-gap and the grid-column-gap properties
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
Properties for the Children(Grid Items)
By default, a container has one grid item for each column, in each row, but we can style the grid items so that they will span multiple columns and/or rows.
Grig items properties are:
grid-column property is used to defines which column(s) to place an item. We define where the item will start, and where the item will end.
grid-column: 1 / 5;
Item1 is start on column 1 and end before column 5
grid-row property is used to define which row to place an item. We define where the item will start, and where the item will end.
grid-row: 1 / 3;
Item1 is start on row-line 1 and end on row-line 3.
this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.
grid-area: 2 / 1 / span 2 / span 3;
Item8 is start on row-line 1 and column-line 2, and end on row-line 5 column-line 6.
In this blog, we have covered the CSS grid and all the most common CSS grid properties. That’s it, for now, hope you learned something new.