CSS Grid
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)
display
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.
.container {
display: grid | inline-grid;
}
Grid Columns
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.
Grid Rows
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
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
3.grid-gap.
is a shorthand property for the grid-row-gap and the grid-column-gap properties
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
column-gap: 10px;
row-gap: 15px;
}
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-start
- grid-column-end
- grid-row-start
- grid-row-end
grid-column
The 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.
.item1 {
grid-column: 1 / 5;
}
Item1 is start on column 1 and end before column 5
grid-row
The 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.
.item1 {
grid-row: 1 / 3;
}
Item1 is start on row-line 1 and end on row-line 3.
grid-area
this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.
.item8 {
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.
Conclusion
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.