CSS Grid

 CSS Grid

CSS Grid allows for a two-dimensional grid-based layout system. Some commonly used properties include:

Grid-template-columns: Defines the number and size of columns in the grid. For example:

.container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

}

Grid-template-rows: Defines the number and size of rows in the grid. For example:

.container {

  display: grid;

  grid-template-rows: 100px 200px;

}

Grid-gap: Sets the gap between grid cells. For example:

.container {

  display: grid;

  grid-gap: 10px;

}