CSS grid-column-end Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.grid {
  display: grid;
  grid-template-columns: repeat(6, 120px);
  grid-auto-rows: 80px;
  gap: 14px;
  padding: 14px;
  background: #f4f7fb;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #4a90e2;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 2;
  background: #7fb7ff;
}

.item2 {
  grid-column-start: 2;
  grid-column-end: 3;
  background: #66a3ff;
}

.item3 {
  grid-column-start: 3;
  grid-column-end: span 2;
  background: #2e86ff;
}

.item4 {
  grid-column-start: 5;
  grid-column-end: 6;
  background: #185ecc;
}

.item5 {
  grid-column-start: 6;
  grid-column-end: -1;
  background: #0b4fa0;
}

.item small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 6px;
}
</style></head><body><div class="grid">
  <div class="item item1">
    Item 1
    <small>grid-column-start: 1; grid-column-end: 2;</small>
  </div>
  <div class="item item2">
    Item 2
    <small>grid-column-start: 2; grid-column-end: 3;</small>
  </div>
  <div class="item item3">
    Item 3
    <small>grid-column-start: 3; grid-column-end: span 2;</small>
  </div>
  <div class="item item4">
    Item 4
    <small>grid-column-start: 5; grid-column-end: 6;</small>
  </div>
  <div class="item item5">
    Item 5
    <small>grid-column-start: 6; grid-column-end: -1;</small>
  </div>
</div></body></html>