Блоки сделанные при помощи grid, накладываются друг на друга в IE

Question

Нормальное отображение -

Отображение в IE -

.containerContent {
    max-width: 1170px;
    padding: 0 15px;
    margin: auto;
    border: 1px solid #ccc;
}
.content-discount-unit{
   display: grid;
   grid-column-gap: 20px;
   grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
   
}
.block-discount {
    border: 1px solid #efe8ca;
    border-radius: 5px;
    height: 160px;
    margin: 10px auto;
    text-align: center;
    width: 165px;
}
.block-discount a{
    color: #000;
    text-decoration: none;
}
.disccount-logo{
    border-bottom: 1px solid #e5d9a7;
    width: 90%;
    margin: 0 auto;
}
.disccount-logo img{width: 100%;}
.percent-discount {
    font-size: 20px;
    font-family: PT_Root_UI_Bold;
    margin-top: 10px;
}
.company-name {
    color: #b4a463;
    font-size: 12px;
    margin-top: 5px;
}

    <body>
        <div class="containerContent">
            <div class="content-discount-unit">
                <div class="block-discount">
                    <a href="http://radio-safari.ru/#">
                        <div class="disccount-logo"><img src="./radio-safari.ru_files/synevo_logo.png" alt=""></div>
                        <div class="percent-discount">10</div>
                        <div class="company-name">Pierre Cardin</div>
                    </a>
                </div>
                <div class="block-discount">
                    <a href="http://radio-safari.ru/#">
                        <div class="disccount-logo"><img src="./radio-safari.ru_files/synevo_logo.png" alt=""></div>
                        <div class="percent-discount">10</div>
                        <div class="company-name">Pierre Cardin</div>
                    </a>
                </div>
                <div class="block-discount">
                    <a href="http://radio-safari.ru/#">
                        <div class="disccount-logo"><img src="./radio-safari.ru_files/synevo_logo.png" alt=""></div>
                        <div class="percent-discount">10</div>
                        <div class="company-name">Pierre Cardin</div>
                    </a>
                </div>
                <div class="block-discount">
                    <a href="http://radio-safari.ru/#">
                        <div class="disccount-logo"><img src="./radio-safari.ru_files/synevo_logo.png" alt=""></div>
                        <div class="percent-discount">10</div>
                        <div class="company-name">Pierre Cardin</div>
                    </a>
                </div>
                <div class="block-discount">
                    <a href="http://radio-safari.ru/#">
                        <div class="disccount-logo"><img src="./radio-safari.ru_files/synevo_logo.png" alt=""></div>
                        <div class="percent-discount">10</div>
                        <div class="company-name">Pierre Cardin</div>
                    </a>
                </div>
                <div class="block-discount">
                    <a href="http://radio-safari.ru/#">
                        <div class="disccount-logo"><img src="./radio-safari.ru_files/synevo_logo.png" alt=""></div>
                        <div class="percent-discount">10</div>
                        <div class="company-name">Pierre Cardin</div>
                    </a>
                </div>
                <div class="block-discount">
                    <a href="http://radio-safari.ru/#">
                        <div class="disccount-logo"><img src="./radio-safari.ru_files/synevo_logo.png" alt=""></div>
                        <div class="percent-discount">10</div>
                        <div class="company-name">Pierre Cardin</div>
                    </a>
                </div>
                <div class="block-discount">
                    <a href="http://radio-safari.ru/#">
                        <div class="disccount-logo"><img src="./radio-safari.ru_files/synevo_logo.png" alt=""></div>
                        <div class="percent-discount">10</div>
                        <div class="company-name">Pierre Cardin</div>
                    </a>
                </div>
            </div>
        </div>
    
<div id="wt-sky-root"></div></body></html>

Answer 1

Под руками к сожалению нет IE, но по идее должно работать. Правда возможно repeat там не будет работать, тогда придется вручную прописать все колонки

.content-discount-unit{
   display: grid;
   display: -ms-grid;
   grid-column-gap: 20px;
   grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
   -ms-grid-columns: repeat(auto-fit, minmax(165px, 1fr));
}

БЛОГ НА HUSL

Блоки сделанные при помощи grid, накладываются друг на друга в IE

Ответы (1 шт):