.container {
    display: grid;
}

<div class="container">
    <div class="item"><!-- … --></div>
    <div class="item"><!-- … --></div>
    <div class="item"><!-- … --></div>
    <!-- … -->
    <div class="item"><!-- … --></div>
    <div class="item"><!-- … --></div>
</div>

.container {
    display: grid;
    grid-template-columns:
        1fr 2fr 1fr 1fr;
    grid-template-rows:
        100px 1fr 1fr 100px;
}

.container {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    grid-template-rows:
        100px auto 100px 100px;
}

.container {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(200px, 1fr)
        );
}

.container {
    grid-template:
        1fr 50px 1fr 1fr /
        100px 3fr 1fr 100px;
}

.container {
    grid-gap: 20px;
}

<div class="container">
    <div class="item"><!-- … --></div>
    <div class="item">Второй</div>
    <div class="item item--first">Первый</div>
    <!-- … -->
    <div class="item"><!-- … --></div>
    <div class="item"><!-- … --></div>
</div>

.item--second {
    order: -1;
}

.item--first {
    order: 1;
}
.item--second {
    order: 2;
}
.item--first ~ .item {
    order: 3;
}

<div class="container">
    <div class="item item--alpha">α</div>
    <div class="item item--omega">ω</div>
</div>

.item--alpha {
    grid-column-start: 3;
}
.item--omega {
    grid-row-start: 3;
}

.item--alpha {
    grid-column-start: 3;
    grid-column-end: 5;
}
.item--omega {
    grid-row-start: 3;
    grid-row-end: 5;
}

.item--alpha {
    grid-column: 3 / 5;
}
.item--omega {
    grid-row: 3 / 5;
}

.item--alpha {
    grid-column: 3 / span 2;
    grid-row: 1 / span 2;
}
.item--omega {
    grid-row: 3 / span 2;
    grid-column: 1 / span 2;
}

.item--alpha {
    grid-area: 2 / 2 / span 2 / span 3;
}

.item--alpha {
    grid-area: alpha;
}
.item--omega {
    grid-area: omega;
}

.container {
    grid-template-areas:
        "omega omega alpha ."
        "omega omega alpha ."
        ". . alpha ."
        ". . alpha .";
}

<div class="page">
    <main class="main">Контент</main>
    <nav class="nav">Навигация</nav>
    <aside class="aside">Реклама</aside>
    <header class="header">Шапка</header>
    <footer class="footer">Подвал</footer>
</div>

.page {
    display: grid;
    grid-gap: 0 20px;
    grid-template-columns: 250px auto 350px;
    grid-template-rows: 100px auto 100px;
}

.header {
    grid-row: 1;
    grid-column: 1/4;
}
.footer {
    grid-row: 3;
    grid-column: 1/4;
}

.nav {
    grid-row: 2;
    grid-column: 1;
}
.main {
    grid-row: 2;
    grid-column: 2;
}
.aside {
    grid-row: 2;
    grid-column: 3;
}

.page {
    display: grid;
    grid-gap: 0 20px;
    grid-template-columns: 250px auto 350px;
    grid-template-rows: 100px auto 100px;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
}

.header { grid-area: header; }
.aside { grid-area: aside; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }

@media (max-width: 900px) {
    .page {
        grid-template-areas:
            "header header header"
            "nav    main   main"
            "footer footer footer";
    }
}

@media (max-width: 900px) {
    .page {
        grid-template-areas:
            "header header header"
            "nav    main   main"
            "footer footer footer";
    }
    .aside {
        display: none;
    }
}

<main class="products">
    <article class="product">…</article>
    <article class="product">…</article>
    <article class="product">…</article>
    <article class="product">…</article>
    <article class="product">…</article>
    …
</main>

$height: 240px;
$width: 150px;
$gap: 20px;

.products {
    display: grid;
    grid-gap: $gap;
    grid-template-columns:
        repeat(6, 150px);
}

&--tall {
    …
    grid-row: span 2;
    height: calc($height*2 + $gap);
}

&--big {
    …
    grid-row: span 2;
    grid-column: span 2;
    height: calc($height*2 + $gap);
    width: calc($width*2 + $gap);
}

<main class="products">
    <aside class="banner"></aside>
    <article class="product product--tall"></article>
    <article class="product"></article>
    <article class="product product--tall"></article>

.banner {
    …
    grid-row-start: 2;
    grid-column-start: 2;
}

<main class="products">
    <aside class="banner-wide"></aside>
    <article class="product product--tall"></article>
    <article class="product"></article>
    <article class="product product--tall"></article>

.banner--wide {
    …
    grid-row-start: 4;
    grid-column: span 6;
}

.products {
    …
    grid-auto-flow: dense;
}

<article class="content">
    <aside class="banners">
        <aside class="banner"></aside>
        <!--…-->
    </aside>
    <main class="products">
        <article class="product"></article>
        <!--…-->
    </main>
</article>

.banners,
.products {
    display: contents;
    margin: auto;
}

@supports ( grid-auto-flow: dense ) {
    /* Магия */
}

/* Флекс */
.products {…}
.product {…}
@supports ( grid-auto-flow: dense ) {
    /* Гриды */
    .products {…}
    .product {…}
}

/* Флекс */
.products {
    max-width: 1020px;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
}

/* Флекс */
.product {
    …
    margin: 0 10px 20px;
}

/* Гриды */
.product {
    …
    margin: auto;
}