grid-column Attribute is the merged shorthand for and, and grid-column-start attribute is the merged shorthand for attribute and. grid-column-end grid-row grid-row-start grid-row-end

.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

Below is an example.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

In the code above, the items item-1 occupy the first row, from the first column line to the third column line.

Among these two properties, spankeywords can also be used to indicate how many grids are spanned.

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

In the above code, the area occupied by the item item-1 includes the first row + second row, first column + second column.

The slash and the following part can be omitted, and it spans a grid by default.

.item-1 {
  grid-column: 1;
  grid-row: 1;
}

In the code above, the item item-1occupies the first grid in the upper left corner.

4.3 grid-area property

grid-area The attribute specifies in which area the item is placed.

.item-1 {
  grid-area: e;
}

In the above code, item 1 is located in the earea, and the effect is as shown in the figure below.

grid-area Attributes can also be used as combined shorthand for grid-row-start, grid-column-start, grid-row-end, grid-column-end to directly specify the location of an item.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

Below is an example.

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}