CSS grid-column Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: center;
    max-width: 800px;
    margin: 20px auto;
}

.item {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 16px;
    text-align: center;
    font-weight: 600;
    border-radius: 6px;
}

.item-b {
    grid-column: 2 / 4;
    background: #bfdbfe;
}

.item-d {
    grid-column: span 2;
    background: #bbf7d0;
}

.item-e {
    grid-column: 1 / -1;
    background: #ffe4b5;
}

small {
    display: block;
    font-weight: 400;
    font-size: 0.85em;
    margin-top: 6px;
    color: #374151;
}</style></head><body><div class='grid'>
    <div class='item item-a'>Item A</div>
    <div class='item item-b'>Item B
      <br>
      <small>grid-column: 2 / 4</small>
    </div>
    <div class='item item-c'>Item C</div>
    <div class='item item-d'>Item D
      <br>
      <small>grid-column: span 2</small>
    </div>
    <div class='item item-e'>Item E
      <br>
      <small>grid-column: 1 / -1</small>
    </div>
</div></body></html>