CSS Gridによる様々なレイアウトの実装例です。

2カラム

サイドカラム（固定幅200px）
メインカラム（余った幅全部）

HTML

<div class="grid grid-2clm">
    <div class="bg-red">
        サイドカラム（固定幅200px）
    </div>
    <div class="bg-green">
        メインカラム（余った幅全部）
    </div>
</div>

CSS

.grid-2clm {
    grid-template-columns: 200px 1fr;
}

3カラム

左カラム（固定幅150px）
メインカラム（余った幅全部）
サイドカラム（固定幅150px）

HTML

<div class="grid grid-3clm">
    <div class="bg-red">
        左カラム（固定幅150px）
    </div>
    <div class="bg-green">
        メインカラム（余った幅全部）
    </div>
    <div class="bg-blue">
        サイドカラム（固定幅150px）
    </div>
</div>

CSS

.grid-3clm {
    grid-template-columns: 150px 1fr 150px;
}

聖杯

ヘッダー
左カラム（固定幅150px）
メインカラム（余った幅全部）
サイドカラム（固定幅150px）
フッター

HTML

<div class="grid grid-hg">
    <div class="bg-orange clmn-header">
        ヘッダー
    </div>
    <div class="bg-red">
        左カラム（固定幅150px）
    </div>
    <div class="bg-green">
        メインカラム（余った幅全部）
    </div>
    <div class="bg-blue">
        サイドカラム（固定幅150px）
    </div>
    <div class="bg-orange clmn-footer">
        フッター
    </div>
</div>

CSS

.grid-hg {
    grid-template-columns: 150px 1fr 150px;
}

.clmn-header,
.clmn-footer {
    grid-column: 1 / 4;
}

左写真、右テキスト、下揃えでボタン

説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。
ボタン

HTML

<div class="grid grid-photo">
    <div class="clmn-photo">
        <img src="https://placehold.jp/3d4070/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-text">
        説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。
    </div>
    <div class="clmn-button">
        <a href="#">ボタン</a>
    </div>
</div>

CSS

.grid-photo {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    grid-gap: 0 1rem
}

.clmn-photo {
    grid-row: 1 / 3;
}

左右入れ替える

説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。
ボタン

CSS

.grid-photo-reverse .clmn-photo {
    grid-column: 2 / 3;
}

左大バナー、右小バナー✕4

HTML

<div class="grid grid-banner">
    <div class="clmn-banner-l">
        <img src="https://placehold.jp/3e7061/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-banner-s">
        <img src="https://placehold.jp/ff61a0/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-banner-s">
        <img src="https://placehold.jp/ff8861/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">

    </div>
    <div class="clmn-banner-s">
        <img src="https://placehold.jp/ff61a0/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">

    </div>
    <div class="clmn-banner-s">
        <img src="https://placehold.jp/ff8861/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">

    </div>
</div>

CSS

.grid-banner {
    grid-template-columns: 2fr 1fr;
    grid-auto-rows: 0.25fr
}

.clmn-banner-l {
    grid-row: 1 / 5
}

.clmn-banner-s {
    overflow: hidden;
}

.clmn-banner-s img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center center;
}

折り返しのある一覧

あいうえお
あいうえお
あいうえお
あいうえお
あいうえお

HTML

<div class="grid grid-list">
    <div class="clmn-list">
        <img src="https://placehold.jp/ff8861/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
        あいうえお
    </div>
    <div class="clmn-list">
        <img src="https://placehold.jp/ff8861/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
        あいうえお
    </div>
    <div class="clmn-list">
        <img src="https://placehold.jp/ff8861/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
        あいうえお
    </div>
    <div class="clmn-list">
        <img src="https://placehold.jp/ff8861/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
        あいうえお
    </div>
    <div class="clmn-list">
        <img src="https://placehold.jp/ff8861/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
        あいうえお
    </div>
</div>

CSS

.grid-list {
    grid-template-columns: repeat(auto-fill, 150px);
    grid-gap: 20px;
}

.clmn-list {
    padding: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

隙間なく敷き詰める

HTML

<div class="grid grid-tile">
    <div class="clmn-tile">
        <img src="https://placehold.jp/40baa2/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-tile">
        <img src="https://placehold.jp/3d4070/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-tile">
        <img src="https://placehold.jp/3e7061/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-tile">
        <img src="https://placehold.jp/3e7061/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-tile">
        <img src="https://placehold.jp/40baa2/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-tile">
        <img src="https://placehold.jp/ff61a0/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-tile">
        <img src="https://placehold.jp/ff61a0/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-tile">
        <img src="https://placehold.jp/40baa2/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-tile">
        <img src="https://placehold.jp/3d4070/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-tile">
        <img src="https://placehold.jp/3e7061/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-tile">
        <img src="https://placehold.jp/ff8861/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-tile">
        <img src="https://placehold.jp/ff61a0/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
    <div class="clmn-tile">
        <img src="https://placehold.jp/3e7061/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F" class="fluid">
    </div>
</div>

CSS

.grid-tile {
    grid-template-columns: repeat(4, 1fr)
}

.clmn-tile:nth-child(5n - 4) {
    grid-row: auto / span 2;
    grid-column: auto / span 2;
}

.clmn-tile:nth-child(5n - 1) {
    grid-row: auto / span 2;
}

.clmn-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

CSSだけで順番逆転

1
これは1の商品です。
2
これは2の商品です。
3
これは3の商品です。
4
これは4の商品です。

HTML

<input type="checkbox" name="sort" id="sort">
<label for="sort">
    順番を入れ替える
</label>
<div class="grid grid-sort">
    <div class="grid clmn-sort">
        <div>1</div>
        <div><img src="https://placehold.jp/40baa2/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F"
                class="fluid"></div>
        <div>これは1の商品です。</div>
    </div>
    <div class="grid clmn-sort">
        <div>2</div>
        <div><img src="https://placehold.jp/3d4070/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F"
                class="fluid"></div>
        <div>これは2の商品です。</div>
    </div>
    <div class="grid clmn-sort">
        <div>3</div>
        <div><img src="https://placehold.jp/ff8861/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F"
                class="fluid"></div>
        <div>これは3の商品です。</div>
    </div>
    <div class="grid clmn-sort">
        <div>4</div>
        <div><img src="https://placehold.jp/3e7061/ffffff/600x600.png?text=%E7%94%BB%E5%83%8F"
                class="fluid"></div>
        <div>これは4の商品です。</div>
    </div>
</div>

CSS

.grid-sort {
    grid-template-columns: 1fr;
}

.clmn-sort {
    grid-template-columns: auto 100px 1fr;
    align-items: center;
    grid-gap: 1rem;
}

.clmn-sort+.clmn-sort {
    border-top: 1px solid #ddd;
}


#sort:checked~.grid-sort .clmn-sort:nth-child(1) {
    order: 4;
}

#sort:checked~.grid-sort .clmn-sort:nth-child(2) {
    order: 3;
}

#sort:checked~.grid-sort .clmn-sort:nth-child(3) {
    order: 2;
}

#sort:checked~.grid-sort .clmn-sort:nth-child(4) {
    order: 1;
}