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:

1. grid-column-start
2. grid-column-end
3. grid-row-start
4. 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.