CSS Grid

Code

.grid-container {
    display: grid;
    /* Define columns */
    grid-template-columns: 1fr 2fr 1fr;
    /* Define rows */
    grid-template-rows: auto 1fr auto;
    /* Gap */
    gap: 20px;
    /* Areas */
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    min-height: 100vh;
}

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

/* Responsive */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "aside"
            "footer";
    }
}

/* auto-fit adaptive columns */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

/* Span columns and rows */
.item-span {
    grid-column: span 2;
    grid-row: span 3;
}

Explanation

Grid is suitable for 2D layouts; grid-template-areas names regions; repeat(auto-fit, minmax()) adapts column count.

More CSS Snippets