Hackforge Academy

Explanation

CSS Grid is a two-dimensional layout system that works with both rows and columns.

Code:

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

Explanation

grid-template-columns defines the number and size of columns in a grid.

Code:

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

Explanation

grid-template-rows defines the height of grid rows.

Code:

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

Explanation

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

Code:

.item {
  grid-column: span 2;
}

.header {
  grid-column: 1 / -1;
}

Explanation

CSS Grid can create responsive layouts using repeat(), minmax(), and auto-fit.

Code:

.container {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}