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