试图找到可以与我的 CSS 网格一起使用的 display: contents 替代方案

Question

我有一个使用 display: contents 的 grid。遗憾的是，该声明仍未得到广泛支持。我正在尝试用更广泛支持的东西代替它，并且不会破坏我当前的 grid 设计。任何帮助将不胜感激。

代码如下：

.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>

Answer 1

你可以把它转换成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>

试图找到可以与我的 CSS 网格一起使用的 display: contents 替代方案

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

css

grid

display

substitution