Mojtaba Seyedi

The grid-area CSS property is a shorthand that specifies the location and the size of a grid item in a grid layout by setting the value of grid-row-start, grid-column-start, grid-row-end and grid-column-end in one declaration.

.grid-container {
  display: 

The grid-row CSS property is a shorthand that specifies the row grid lines where a grid item starts and ends in a grid layout, and does it in a single declaration.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-item:nth-child(2) 

The grid-column CSS property is a shorthand that specifies the column grid lines where a grid item starts and ends in a grid layout in one declaration.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-item:nth-child(2) {
  grid-column: 3 / 

The grid-row-end CSS property is part of the CSS Grid Layout specification, used to indicate the row grid line where a grid item ends in a grid layout. This property — among other line-based placement grid properties — controls …

The grid-row-start CSS property is part of the CSS Grid Layout specification, used to indicate the row grid line where a grid item starts in a grid layout. This property — among other line-based placement grid properties — controls …

The grid-column-start CSS property is part of the CSS Grid Layout specification, used to indicate the column grid line where a grid item starts in a grid layout. This property — among other line-based placement grid properties — controls …

The grid-column-end CSS property is part of the CSS Grid Layout specification, used to indicate the column grid line where a grid item ends in a grid layout. This property — among other line-based placement grid properties — controls …

The grid CSS property is a shorthand that allows you to set all the implicit and the explicit grid properties in a single declaration.

.grid-container {
  display: grid;
  grid: auto-flow dense / repeat(5, 150px);
}

The grid-auto-flow CSS property is part of the CSS Grid Layout specification that allows us to control the flow of grid items that are automatically placed when they are not explicitly positioned with any grid-placement properties.

.grid-container {
  display: grid;
  

The grid-auto-columns CSS property is part of the CSS Grid Layout specification, specifying the size of the grid columns that were created without having an explicit size. In other words, this property sets the size of implicit columns and …

The grid-auto-rows CSS property is part of the CSS Grid Layout specification, specifying the size of the grid rows that were created without having an explicit size. In other words, this property sets the size of implicit rows and …