Item positioning

grid items can occupy specific cells or span multiple rows / columns using dedicated properties.

grid-column and grid-row: define where an item starts and ends in terms of row / column.
grid-area: combines start / end row and column in one property.

Example

In this dynamic example, using grid-column / grid-row we tell the element with the class positioning to occupy columns 1 and 2, and rows 1 and 2. With grid-area, we tell the element with the class positioning to take rows 1 and 2 and column 3.

Select positioning:

grid-column / grid-rowgrid-area

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child positioning">3</div>
  <div class="child">4</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child positioning">3</div>
  <div class="child">4</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.5rem;
}

.positioning {
  background: #d9d2f5;
  grid-column: 1 / 3; /* grid-column: col-start / col-end */
  grid-row: 1 / 3; /* grid-row: row-start / row-end */
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.5rem;
}

.positioning {
  background: #d9d2f5;
  grid-column: 1 / 3; /* grid-column: col-start / col-end */
  grid-row: 1 / 3; /* grid-row: row-start / row-end */
}

.child {
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.