CSS: grid-row, grid-column (position in grid)

grid-row is a shorthand for grid-row-start and grid-row-end

by default, their values is auto.

.x {
 grid-row: 3 / 7;
}

/* equivalent to */

.x {
 grid-row-start: 3;
 grid-row-end: 7;
}

/* s------------------------------ */

.x {
 grid-row: 3;
}

/* equivalent to */

.x {
 grid-row-start: 3;
 grid-row-end: 4;
}

grid-column is a shorthand for grid-column-start and grid-column-end

once you created a grid with grid-template-columns and grid-template-rows, you can begin to define how child items sit on which grid cells between grid lines.

neighboring columns and rows between grid lines are called grid track.

example. normal fill

normally, items fills the available cell.

.xgridbox {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 1.5rem;
 gap: 2px;
 > * {
  border: solid 1px grey;
  margin: 0;
  padding: 0.3rem;
  border-radius: 0.5rem;
 }

 > .xitem-1 {
  border: solid 2px red;
 }
}

example

to define where does a child sit, use

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

example

.xgrid-B2HXr {
 > .xitem-1 {
  grid-row-start: 1;
  grid-column-start: 2;
 }
}

example

.xgrid-MJP3V {
 > .xitem-1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
 }
}

example

.xgrid-tW2CC {
 > .xitem-1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4;
 }
}

span row, span column

example. span 3 rows

.xspan3row {
 > .xitem-1 {
  grid-row: span 3;
 }
}

example. span 2 columns

.spancol-FT5HJ {
 > .xitem-1 {
  grid-column: span 2;
 }
}

example. second item span 3 columns

.spancol-FT5HJ {
 > .xitem-1 {
  grid-column: span 3;
 }
}

example. span both rows and columns

.spanbothQX4pf {
 > .xitem-1 {
  grid-row: span 2;
  grid-column: span 2;
 }
}