CSS Grid in 10 Minutes

Grid vs Flexbox

Flexbox: One dimension (row OR column) Grid: Two dimensions (rows AND columns)

Basic Grid

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
    gap: 20px;
}

Column Sizing

/* Fixed width */
grid-template-columns: 200px 200px;

/* Flexible (fr = fraction) */
grid-template-columns: 1fr 2fr;  /* 1:2 ratio */

/* Mixed */
grid-template-columns: 200px 1fr 1fr;

/* Repeat */
grid-template-columns: repeat(4, 1fr);

/* Auto-fit responsive */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Positioning Items

.item {
    grid-column: 1 / 3;      /* Span columns 1-2 */
    grid-row: 1 / 2;         /* Row 1 */
}

/* Shorthand */
.item {
    grid-area: 1 / 1 / 2 / 3;  /* row-start / col-start / row-end / col-end */
}

Named Areas

.container {
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 200px 1fr;
}

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

Responsive Grid

.container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(3, 1fr);
    }
}

Auto-fit Magic

Cards that reflow automatically:

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}