CSS Grid

CSS Grid is a powerful layout system that allows web developers to create complex and flexible grid-based layouts for their web pages. Here are all the CSS Grid properties along with examples of their usage:

1. display: grid; - defines an element as a grid container.

cssCopy code.container {
  display: grid;
}

1. grid-template-columns - defines the columns of the grid.

cssCopy code.container {
  grid-template-columns: 1fr 2fr 1fr;
}

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

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

1. grid-template-areas - defines named grid areas.

cssCopy code.container {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

1. grid-template - shorthand for defining the columns, rows, and areas of the grid.

cssCopy code.container {
  grid-template:
    "header header header"
    "sidebar content content"
    "footer footer footer" / 1fr 2fr 1fr;
}

1. grid-column-gap - defines the space between columns.

cssCopy code.container {
  grid-column-gap: 20px;
}

1. grid-row-gap - defines the space between rows.

cssCopy code.container {
  grid-row-gap: 10px;
}

1. grid-gap - shorthand for defining both column and row gaps.

cssCopy code.container {
  grid-gap: 20px 10px;
}

1. justify-items - aligns items horizontally within their grid cell.

cssCopy code.container {
  justify-items: center;
}

1. align-items - aligns items vertically within their grid cell.

cssCopy code.container {
  align-items: center;
}

1. place-items - shorthand for aligning both horizontally and vertically.

cssCopy code.container {
  place-items: center;
}

1. justify-content - aligns the grid along the horizontal axis.

cssCopy code.container {
  justify-content: center;
}

1. align-content - aligns the grid along the vertical axis.

cssCopy code.container {
  align-content: center;
}

1. place-content - shorthand for aligning both horizontally and vertically.

cssCopy code.container {
  place-content: center;
}

1. justify-self - aligns an item horizontally within its grid cell.

cssCopy code.item {
  justify-self: center;
}

1. align-self - aligns an item vertically within its grid cell.

cssCopy code.item {
  align-self: center;
}

1. grid-auto-columns - defines the size of columns created implicitly.

cssCopy code.container {
  grid-auto-columns: 100px;
}

1. grid-auto-rows - defines the size of rows created implicitly.

cssCopy code.container {
  grid-auto-rows: 100px;
}

1. grid-auto-flow - controls the placement of items that are not explicitly placed.

cssCopy code.container {
  grid-auto-flow: dense;
}

1. grid - shorthand for defining all grid properties.

cssCopy code.container {
  grid:
    "header header header"
    "sidebar content content"
    "footer footer footer" / 1fr 2fr 1fr;
  grid-gap: 20px;
  justify-items: center;
  align-items: center;
  justify-content: center