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

Issue

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 class="grid">
    <div class="grid-cell"></div>
    <div class="grid-cell">Price</div>
    <div class="grid-cell">Quantity</div>
    
    <div class="grid-row">
    <div class="grid-cell">Item 1</div>
    <div class="grid-cell">10.00</div>
    <div class="grid-cell">1</div>
    </div>
    
    <div class="grid-row">
    <div class="grid-cell">Item 2</div>
    <div class="grid-cell">20.00</div>
    <div class="grid-cell">2</div>
    </div>
    
    <div class="grid-row">
    <div class="grid-cell">Item 3</div>
    <div class="grid-cell">30.00</div>
    <div class="grid-cell">3</div>
    </div>
</div>

Solution

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 class="grid">
    <div class="grid-cell"></div>
    <div class="grid-cell">Price</div>
    <div class="grid-cell">Quantity</div>
    
    <div class="grid-row">
    <div class="grid-cell">Item 1</div>
    <div class="grid-cell">10.00</div>
    <div class="grid-cell">1</div>
    </div>
    
    <div class="grid-row">
    <div class="grid-cell">Item 2</div>
    <div class="grid-cell">20.00</div>
    <div class="grid-cell">2</div>
    </div>
    
    <div class="grid-row">
    <div class="grid-cell">Item 3</div>
    <div class="grid-cell">30.00</div>
    <div class="grid-cell">3</div>
    </div>
</div>

Answered By – vanowm

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published