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

サンプル1

サンプル1では、ディスプレイ幅に応じて1カラムから4カラムまでカラム数が変化するようにレイアウトを組んでいます。

街並み1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?

街並み2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?

街並み3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?

街並み4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?

街並み5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?

街並み6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?

街並み7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?

街並み8

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusantium, maxime quasi aut assumenda facere facilis blanditiis fuga magni?

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">街並み1</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">街並み2</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">街並み3</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">街並み4</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">街並み5</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">街並み6</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">街並み7</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">街並み8</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;
}

サンプル2

サンプル2では5つの要素があって、ディスプレイ幅に応じて2カラムから5カラムまでカラム数が変化するようにレイアウトを組んでいます。

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%;
}