CSS: grid-row, grid-column

Grid-row and grid-column

grid-row and grid-column are properties for child items of grid layout.

they define the position and span of a child item in the grid.

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

by default, their values are auto.

• Value is a integer or keywords. When integer, it means line number.
• Line number start counting at 1.
• For row, line 1 is top edge of the grid box.
• For column, line 1 is left edge of the grid box.
• Line number can be negative, meaning counting from the end.

.x {
 grid-row: 3;
}

/* equivalent to */

.x {
 grid-row-start: 3;
 grid-row-end: 4;
 /* number means grid lines. for row, top edge is line 1. */
}

Example. Specify position and size of one item.

<div class="xgrid-B2HXr">
 <div class="xitem-1">1</div>
 <div class="xitem-2">2</div>
 <div class="xitem-3">3</div>
 <div class="xitem-4">4</div>
 <div class="xitem-5">5</div>
 <div class="xitem-6">6</div>
 <div class="xitem-7">7</div>
 <div class="xitem-8">8</div>
 <div class="xitem-9">9</div>
</div>

.xgrid-B2HXr {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-1 {
  border: solid 2px red;
  grid-row: 1;
  grid-column: 2;
 }
}

Slash syntax, for nth to mth

Value for grid-row can be two numbers separated by a slash. e.g. a / b. (same for grid-column)

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

/* equivalent to */

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

/* 
line index start at 1.
For row, line 1 is the top edge.
For column, line 1 is the left edge.
 */

Example. Row 1 / 3

<div class="xgrid-MJP3V">
 <div class="xitem-1">1</div>
 <div class="xitem-2">2</div>
 <div class="xitem-3">3</div>
 <div class="xitem-4">4</div>
 <div class="xitem-5">5</div>
 <div class="xitem-6">6</div>
 <div class="xitem-7">7</div>
 <div class="xitem-8">8</div>
 <div class="xitem-9">9</div>
</div>

.xgrid-MJP3V {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-1 {
  border: solid 2px red;
  grid-row: 1 / 3;
  grid-column: 2;
 }
}

Example. across row and columns

<div class="xgrid-tW2CC">
 <div class="xitem-1">1</div>
 <div class="xitem-2">2</div>
 <div class="xitem-3">3</div>
 <div class="xitem-4">4</div>
 <div class="xitem-5">5</div>
 <div class="xitem-6">6</div>
 <div class="xitem-7">7</div>
 <div class="xitem-8">8</div>
 <div class="xitem-9">9</div>
</div>

.xgrid-tW2CC {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-1 {
  border: solid 2px red;
  grid-row: 1/3;
  grid-column: 2/4;
 }
}

Span syntax to span rows, span columns

Value for grid-row can be span n. (same for grid-column)

.x {
 grid-row: span 3;
}

/* equivalent to */

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

Example. span 3 rows

<div class="xspanrow-QkMtY">
 <div class="xitem-1">1</div>
 <div class="xitem-2">2</div>
 <div class="xitem-3">3</div>
 <div class="xitem-4">4</div>
 <div class="xitem-5">5</div>
 <div class="xitem-6">6</div>
 <div class="xitem-7">7</div>
 <div class="xitem-8">8</div>
 <div class="xitem-9">9</div>
</div>

.xspanrow-QkMtY {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-1 {
  border: solid 2px red;
  grid-row: span 3;
 }
}

Example. span 2 columns

<div class="spancol-FT5HJ">
 <div class="xitem-1">1</div>
 <div class="xitem-2">2</div>
 <div class="xitem-3">3</div>
 <div class="xitem-4">4</div>
 <div class="xitem-5">5</div>
 <div class="xitem-6">6</div>
 <div class="xitem-7">7</div>
 <div class="xitem-8">8</div>
 <div class="xitem-9">9</div>
</div>

.spancol-FT5HJ {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-1 {
  border: solid 2px red;
  grid-column: span 2;
 }
}

Example. second item span 3 columns

<div class="x2nd-FdtNt">
 <div class="xitem-1">1</div>
 <div class="xitem-2">2</div>
 <div class="xitem-3">3</div>
 <div class="xitem-4">4</div>
 <div class="xitem-5">5</div>
 <div class="xitem-6">6</div>
 <div class="xitem-7">7</div>
 <div class="xitem-8">8</div>
 <div class="xitem-9">9</div>
</div>

.x2nd-FdtNt {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-2 {
  grid-column: span 3;
  border: solid 2px red;
 }
}

Example. span both rows and columns

<div class="xspanboth-QX4pf">
 <div class="xitem-1">1</div>
 <div class="xitem-2">2</div>
 <div class="xitem-3">3</div>
 <div class="xitem-4">4</div>
 <div class="xitem-5">5</div>
 <div class="xitem-6">6</div>
 <div class="xitem-7">7</div>
 <div class="xitem-8">8</div>
 <div class="xitem-9">9</div>
</div>

.xspanboth-QX4pf {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-1 {
  border: solid 2px red;
  grid-row: span 2;
  grid-column: span 2;
 }
}