Hackforge Academy

Explanation

CSS Grid is a two-dimensional layout system that arranges items into rows and columns, making complex layouts easier to build.

Code:

.container {
  display: grid;
}

Explanation

The grid-template-columns property defines the number and width of columns in the grid.

Code:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Explanation

The grid-template-rows property defines the height of each row in the grid layout.

Code:

.container {
  display: grid;
  grid-template-rows: 100px 150px;
}

Explanation

The gap property adds spacing between rows and columns without using margins.

Code:

.container {
  display: grid;
  gap: 15px;
}

Explanation

Grid items can span multiple rows or columns using the grid-column and grid-row properties.

Code:

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}