メディアクエリなしで作るレスポンシブレイアウト

HTML

<div class="container">
        <h2>サンプル1</h2>
        <p>サンプル1では、ディスプレイ幅に応じて1カラムから4カラムまでカラム数が変化するようにレイアウトを組んでいます。</p>
        <section class="card-wrapper">
            <div class="card">
                <img class="card__thumbnail" src="img/nyc/ny1.jpg">
                <div class="card__item">
                    <h3 class="card__title">街並み１</h3>
                    <p class="card__discription">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?</p>
                    <div class="card__btn"><button>More</button></div>
                </div>
            </div>

            <div class="card">
                <img class="card__thumbnail" src="img/nyc/ny2.jpg">
                <div class="card__item">
                    <h3 class="card__title">街並み２</h3>
                    <p class="card__discription">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?</p>
                    <div class="card__btn"><button>More</button></div>
                </div>
            </div>

            <div class="card">
                <img class="card__thumbnail" src="img/nyc/ny3.jpg">
                <div class="card__item">
                    <h3 class="card__title">街並み３</h3>
                    <p class="card__discription">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?</p>
                    <div class="card__btn"><button>More</button></div>
                </div>
            </div>

            <div class="card">
                <img class="card__thumbnail" src="img/nyc/ny4.jpg">
                <div class="card__item">
                    <h3 class="card__title">街並み４</h3>
                    <p class="card__discription">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?</p>
                    <div class="card__btn"><button>More</button></div>
                </div>
            </div>

            <div class="card">
                <img class="card__thumbnail" src="img/nyc/ny5.jpg">
                <div class="card__item">
                    <h3 class="card__title">街並み５</h3>
                    <p class="card__discription">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?</p>
                    <div class="card__btn"><button>More</button></div>
                </div>
            </div>

            <div class="card">
                <img class="card__thumbnail" src="img/nyc/ny6.jpg">
                <div class="card__item">
                    <h3 class="card__title">街並み６</h3>
                    <p class="card__discription">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?</p>
                    <div class="card__btn"><button>More</button></div>
                </div>
            </div>

            <div class="card">
                <img class="card__thumbnail" src="img/nyc/ny7.jpg">
                <div class="card__item">
                    <h3 class="card__title">街並み７</h3>
                    <p class="card__discription">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?</p>
                    <div class="card__btn"><button>More</button></div>
                </div>
            </div>

            <div class="card">
                <img class="card__thumbnail" src="img/nyc/ny8.jpg">
                <div class="card__item">
                    <h3 class="card__title">街並み８</h3>
                    <p class="card__discription">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?</p>
                    <div class="card__btn"><button>More</button></div>
                </div>
            </div>
        </section>
</div> <!-- /container -->

CSS

.container {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto 100px;
}

.card-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    grid-column-gap: 20px;
    grid-row-gap: 40px;
}

.card {
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.card__thumbnail {
    width: 100%;
    max-width: 100%;
}

.card__item {
    padding: 20px;
}

.card__btn {
    text-align: right;
}

.card__btn > button {
    margin-top: 10px;
    padding: 0 20px;
}

HTML

<div class="container">
        <h2>サンプル2</h2>
        <p>サンプル2では5つの要素があって、ディスプレイ幅に応じて2カラムから5カラムまでカラム数が変化するようにレイアウトを組んでいます。</p>
        <div class="banner-wrapper">
            <div class="banner">
                <img src="img/fruit/fruit1.jpg">
            </div>
            <div class="banner">
                <img src="img/fruit/fruit2.jpg">
            </div>
            <div class="banner">
                <img src="img/fruit/fruit3.jpg">
            </div>
            <div class="banner">
                <img src="img/fruit/fruit4.jpg">
            </div>
            <div class="banner">
                <img src="img/fruit/fruit5.jpg">
            </div>
        </div>
</div> <!-- /container -->

CSS

.container {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto 100px;
}

.banner-wrapper {
    width: 100%;
    margin: 0 auto 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.banner {
    width: 100%;
}

.banner img {
    max-width: 100%;
}