Как я должен просмотреть CSS, чтобы поддержать раздел на старых браузерах, например, 5,6,7?

Question

Текущий раздел использует новую CSS-сетку для позиционирования элементов. Поскольку домашняя работа хочет поддерживать старые браузеры, мне поручено переопределить код сетки и использовать плавающие (или аналогичные) для сохранения той же структуры. Myncode должен поддерживать вплоть до IE11. Я должен убедиться, что раздел будет вести себя одинаково во всех окнах просмотра.

 <section class="gallery">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2 class='section-headline'>The Gallery</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="gallery-grid">
                        <div class="gallery-photo grid-third grid-left">
                            <figure class='image-moon-1'></figure>
                        </div>
                        <div class="gallery-photo grid-two-third grid-right">
                            <figure class='image-moon-2'></figure>
                        </div>
                        <div class="gallery-photo grid-two-third grid-left">
                            <figure class='image-moon-3'></figure>
                        </div>
                        <div class="gallery-photo grid-third grid-right">
                            <figure class='image-moon-4'></figure>
                        </div>
                        <div class="gallery-photo grid-third grid-left">
                            <figure class='image-moon-5'></figure>
                        </div>
                        <div class="gallery-photo grid-two-third grid-right">
                            <figure class='image-moon-6'></figure>
                        </div>
                        <div class="gallery-photo grid-half grid-left small-hide">
                            <figure class='image-moon-7'></figure>
                        </div>
                        <div class="gallery-photo grid-half grid-right small-hide">
                            <figure class='image-moon-8'></figure>
                        </div>
                        <div class="gallery-photo grid-third grid-left">
                            <figure class='image-moon-9'></figure>
                        </div>
                        <div class="gallery-photo grid-two-third grid-right">
                            <figure class='image-moon-10'></figure>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


.gallery {
    background-color: #fafafa;
    color: #000;
    padding: 60px 0;
}
.gallery .section-headline {
    margin-bottom: 60px;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}