Items in Css Grid in IE 11 superimposed on each other. Everything work fine in Chrome, FF and Safari, but not IE 11.
Code:
.content-item__image {
height: 210px;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.content-item__description {
padding: 16px 28px;
}
.content-grid {
display: grid;
display: -ms-grid;
grid-template-columns: 1fr 1fr 1fr;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
grid-gap: 1rem;
}
<div class="content-grid">
<div class="content-item">
<div class="content-item__backdrop"></div>
<div class="content-item__image"></div>
<div class="content-item__description">Cos’è il Texas holdem</div>
</div>
<div class="content-item">
<div class="content-item__backdrop"></div>
<div class="content-item__image"></div>
<div class="content-item__description">Cos’è il Texas holdem</div>
</div>
<div class="content-item">
<div class="content-item__backdrop"></div>
<div class="content-item__image"></div>
<div class="content-item__description">Cos’è il Texas holdem</div>
</div>
<div class="content-item">
<div class="content-item__backdrop"></div>
<div class="content-item__image"></div>
<div class="content-item__description">Cos’è il Texas holdem</div>
</div>
<div class="content-item">
<div class="content-item__backdrop"></div>
<div class="content-item__image"></div>
<div class="content-item__description">Cos’è il Texas holdem</div>
</div>
<div class="content-item">
<div class="content-item__backdrop"></div>
<div class="content-item__image"></div>
<div class="content-item__description">Cos’è il Texas holdem</div>
</div>
</div>
What could be the problem and the ways to solve it? Will be grateful for any help.