Trying to find display: contents alternative that I can use with my CSS grid-CodePudding

I have a grid that uses display: contents. Unfortunately, this declaration still isn't widely supported. I'm trying to substitute it with something that's more widely supported and that wouldn't break my current grid design. Any help would be greatly appreciated.

Here's the code:

.grid-row {
    display: contents;
}

.grid-row:hover > div {
    background-color: #262626;
    color: #fff;
}

    .grid-cell {
        background-color: #000;
        color: #808080;
        padding: .5rem;
        min-height: 4rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
    }
    
    .grid {
        margin: 0 auto;
        display: grid;
        grid-gap: 1px;
        background-color: #808080 !important;
        border: 1px solid #808080 !important;
        grid-template-columns: repeat(3, 1fr);
        grid-template-columns: auto min-content min-content;
        white-space: pre-wrap !important;
    }

<div >
    <div ></div>
    <div >Price</div>
    <div >Quantity</div>
    
    <div >
    <div >Item 1</div>
    <div >10.00</div>
    <div >1</div>
    </div>
    
    <div >
    <div >Item 2</div>
    <div >20.00</div>
    <div >2</div>
    </div>
    
    <div >
    <div >Item 3</div>
    <div >30.00</div>
    <div >3</div>
    </div>
</div>

CodePudding user response：

You could convert it into table:

.grid-row {
    display: table-row;
}

.grid-row:hover > div {
    background-color: #262626;
    color: #fff;
}

    .grid-cell {
        background-color: #000;
        color: #808080;
        padding: .5rem;
        line-height: 4rem;
        display: table-cell;
        position: relative;
    }
    
    .grid {
        margin: 0 auto;
        display: table;
        background-color: #808080 !important;
        white-space: pre-wrap !important;
        border-spacing: 1px;
    }
    
.grid > :first-of-type
{
  width: 100%;
}

<div >
    <div ></div>
    <div >Price</div>
    <div >Quantity</div>
    
    <div >
    <div >Item 1</div>
    <div >10.00</div>
    <div >1</div>
    </div>
    
    <div >
    <div >Item 2</div>
    <div >20.00</div>
    <div >2</div>
    </div>
    
    <div >
    <div >Item 3</div>
    <div >30.00</div>
    <div >3</div>
    </div>
</div>