O Grid Template é mais apropriado para criar layouts complexos de páginas, oferecendo um alto grau de controle sobre o posicionamento dos elementos.

fr_20

fr_25

fr_33

fr_50

fr_100

<div class="gridbox">
    <div class="fr_20">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="fr_25">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="fr_33">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="fr_50">
        <div></div>
        <div></div>
    </div>
    <div class="fr_100">
        <div></div>
    </div>
</div>

fr_33x67

fr_67x33

fr_25x75

fr_75x25

fr_20x80

fr_80x20

<div class="gridbox">
    <div class="fr_33x67">
        <div></div>
        <div></div>
    </div>
    <div class="fr_67x33">
        <div></div>
        <div></div>
    </div>
    <div class="fr_25x75">
        <div></div>
        <div></div>
    </div>
    <div class="fr_75x25">
        <div></div>
        <div></div>
    </div>
    <div class="fr_20x80">
        <div></div>
        <div></div>
    </div>
    <div class="fr_80x20">
        <div></div>
        <div></div>
    </div>
</div>

fr_20x40x40

fr_40x40x20

fr_20x60x20

fr_25x50x25

<div class="gridbox">
    <div class="fr_20x40x40">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="fr_40x40x20">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="fr_20x60x20">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="fr_25x50x25">
        <div></div>
        <div></div>
        <div></div>
    </div>

fr_20x20x20x40

fr_40x20x20x20

fr_23x23x23x31

fr_31x23x23x23

<div class="gridbox">
    <div class="fr_20x20x20x40">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="fr_40x20x20x20">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="fr_23x23x23x31">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="fr_31x23x23x23">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

Exemplo de template/layout de pagina usando classes pré-definidas

LOGOTIPO

article

<body>
    <div class="gridbox">
        <header class="fr_33x67">
            <h1 class="m0 pl50">LOGOTIPO</h1>
            <nav class="pr50 txt_right">menu</nav>
        </header>
        <div id="content" class="fr_75x25 px50">
            <section class="p5">
                <main class="fr_50">
                    <article>article</article>
                    <article>article</article>
                    <article>article</article>
                    <article>article</article>
                    <article>article</article>
                    <article>article</article>
                </main>
                <nav class="fr_100 mt10">
                    <div class="txt_center">paginacao</div>
                </nav>
            </section>
            <aside class="fr_100 p5">
                <div>widget</div>
                <div>widget</div>
                <div>widget</div>
            </aside>
        </div>
        <footer class="fr_100">
            <div class="px50 pt20">footer</div>
        </footer>
    </div>
</body>

grid-template.css:

.gridbox, [class^="fr_"], [class*=" fr_"] {
    display: grid;
    gap: 0.4rem 0.4rem;
    width: 100%;
}
[class^="fr_"], [class*=" fr_"], .fr_100 {
    grid-template-columns: 1fr
}
.gridbox [class^="fr_"] > *, .gridbox [class*=" fr_"] > *  {
    padding: 0.75rem;
}
@media(min-width: 768px) {
    .fr_20 { grid-template-columns: repeat(5, 1fr) }
    .fr_25 { grid-template-columns: repeat(4, 1fr) }
    .fr_33 { grid-template-columns: 1fr 1fr 1fr }
    .fr_50 { grid-template-columns: 1fr 1fr; }

    .fr_33x67 { grid-template-columns: 1fr 2fr }
    .fr_67x33 { grid-template-columns: 2fr 1fr }
    .fr_25x75 { grid-template-columns: 1fr 3fr }
    .fr_75x25 { grid-template-columns: 3fr 1fr }
    .fr_20x80 { grid-template-columns: 1fr 4fr }
    .fr_80x20 { grid-template-columns: 4fr 1fr }

    .fr_20x40x40 { grid-template-columns: 1fr 2fr 2fr }
    .fr_40x40x20 { grid-template-columns: 2fr 2fr 1fr }
    .fr_20x60x20 { grid-template-columns: 1fr 3fr 1fr }
    .fr_25x50x25 { grid-template-columns: 1fr 2fr 1fr }    

    .fr_20x20x20x40 { grid-template-columns: 1fr 1fr 1fr 2fr }
    .fr_40x20x20x20 { grid-template-columns: 2fr 1fr 1fr 1fr }

    .fr_23x23x23x31 { grid-template-columns: repeat(3, 1.4fr) 2fr }
    .fr_31x23x23x23 { grid-template-columns: 2fr repeat(3, 1.4fr) }
}

Exemplo individual

Não incluso em grid-template.css

LOGOTIPO

TITULO

Torquent magnam ad, convallis? Iure necessitatibus senectus sollicitudin nam parturient consequatur netus. Imperdiet molestias! Facilisis saepe, temporibus sollicitudin amet donec mauris dolores.

Eum blanditiis, saepe cubilia ullam orci? Porttitor repudiandae placeat, metus egestas officiis mi sapiente tellus dictumst eget. Proident nullam! Sodales erat fusce.

Class cursus corrupti pharetra cupidatat, distinctio ante temporibus nec et mollitia proin. Iure in aut? Tempore sociosqu montes sapiente excepteur ullamco, venenatis.

<body>
    <div id="grid">
        <header>
            <h2>LOGOTIPO</h2>
            <nav>
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="38" viewBox="0 0 30 30" fill=#90959A>
                    <path d="M 3 7 A 1.0001 1.0001 0 1 0 3 9 L 27 9 A 1.0001 1.0001 0 1 0 27 7 L 3 7 z M 3 14 A 1.0001 1.0001 0 1 0 3 16 L 27 16 A 1.0001 1.0001 0 1 0 27 14 L 3 14 z M 3 21 A 1.0001 1.0001 0 1 0 3 23 L 27 23 A 1.0001 1.0001 0 1 0 27 21 L 3 21 z"></path>
                </svg>
            </nav>
        </header>
        <div id="content">
            <main>
                <h1>TITULO</h1>
                <article>
                    <p>Torquent magnam ad, convallis? Iure necessitatibus senectus sollicitudin nam parturient consequatur netus. Imperdiet molestias! Facilisis saepe, temporibus sollicitudin amet donec mauris dolores.</p>
                    <p>Eum blanditiis, saepe cubilia ullam orci? Porttitor repudiandae placeat, metus egestas officiis mi sapiente tellus dictumst eget. Proident nullam! Sodales erat fusce.</p>
                    <p>Class cursus corrupti pharetra cupidatat, distinctio ante temporibus nec et mollitia proin. Iure in aut? Tempore sociosqu montes sapiente excepteur ullamco, venenatis.</p>
                </article>
            </main>
            <aside>
                <div>widget</div>
                <div>widget</div>
                <div>widget</div>
            </aside>
        </div>
        <footer>
            <div>rodape © <?= date('Y') ?></div>
        </footer>
    </div>
</body>

#grid, #grid header, #content, #content aside {
    display: grid;
    gap: 0.7rem 0.7rem;
    width: 100%;
}
#grid {
    border: 2px solid rgba(255, 255, 255, 0.13);
    background-color: rgba(255, 255, 255, 0.15);
    padding: 1rem 0.7rem 0.7rem;
}
#content {
    padding: 1rem 0.7rem 0.7rem;
    border: 2px solid rgba(255, 255, 255, 0.13);
}
#grid header, #grid main, 
#grid aside, #grid footer {
    background-color: rgba(0, 0, 0, 0.30);
    padding: 0.7rem;
    min-height: 50px;
}
#grid header { 
    grid-template-columns: 1fr 3fr; /* logotipo | menu */
}
#grid h2 { /* logotipo */
    margin: 0 0;
}
#grid nav, #grid footer {
    text-align: right;
}
#content main h1 { /* titulo da pagina */
    text-align: center;
    font-style: italic;
    margin-top: 0;
}
#grid aside > div { /* widgets */
    grid-template-columns: 1fr;
    padding: 0.7rem;
    min-height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.13);
}
@media(min-width: 640px) {
    #grid {
        grid-template-columns: 1fr;
    }
    #content {
        grid-template-columns: 3fr 1fr;
        width: 90%;
        margin: 0.7rem auto;
    }
    #grid header, #grid footer {
        padding-right: calc(5% + 0.7rem);
        padding-left: calc(5% + 0.7rem);
    }
}