Create a Grid Container

Syntax

These properties are applied to elements inside a grid container:

•   Defines the grid columns. In this case, it creates a column that takes up all available space (1fr).
  grid-template-columns: 1fr;


•   Defines the grid rows. Here, it creates a row that takes up twice the space of other rows (2fr).
  grid-template-rows: 2fr;


•   Defines in which area of the grid the element is placed. In this case, the element is positioned in the area named 'item3'.
  grid-area: item3;

Example:
.container {
    display: grid;
}
.item1 {
    grid-template-columns: 1fr;
}
.item2 {
    grid-template-rows: 2fr;
}
.item3 {
    grid-area: item3;
}