CSS Grid - Cards

by Daniel Beff

HTML

<section class="section">


    <div class="card">
        Card
    </div>
    <div class="card">
        Card
    </div>
    <div class="card">
        Card
    </div>
    <div class="card">
        Card
    </div>
    <div class="card">
        Card
    </div>
    <div class="card">
        Card
    </div>
	    <aside class="sidebar">Sidebar
    </aside>
</section>

SCSS

.section {
    display: grid;
	grid-template-areas: "sidebar b c" "sidebar b c" "a b c";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;

    justify-items: stretch;
}

.sidebar {
    grid-area: sidebar;
    background: purple;
    min-height: 100px;
}

.card {
    grid-area: card;
    background: orange;
}