<div class="grid">
    <div class="grid__item" data-column-start="1"></div>
    <div class="grid__item grid__item--highlight" data-column-start="2"></div>
    <div class="grid__item" data-column-start="4" data-column-end="5"></div>
</div>

body {
    color: rgb(51 65 85);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
* {
    box-sizing: border-box;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgb(203 213 225);

    height: 24rem;
    margin: 2rem;
}
.grid__item--highlight {
    background: rgb(203 213 225);
    grid-column-start: 2;
    grid-column-end: 4;
}

/* Display the row number */
.grid__item {
    position: relative;
}
.grid__item:not(:last-child) {
    border-right: 1px solid rgb(203 213 225);
}
.grid__item::before,
.grid__item::after {
    border: 1px solid rgb(203 213 225);
    border-radius: 50%;
    height: 1.5rem;
    width: 1.5rem;

    align-items: center;
    display: flex;
    justify-content: center;
}
.grid__item::before {
    background: #fff;

    content: attr(data-column-start);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
}
.grid__item::after {
    background: #fff;

    content: attr(data-column-end);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
}