CSS Flexbox and Grid

CSS Flexbox

Flexbox (Flexible Box Layout) is a one-dimensional layout system for arranging items in a row or column.

.container {
    display: flex;
    flex-direction: row;        /* row | column | row-reverse | column-reverse */
    justify-content: center;    /* main axis alignment */
    align-items: center;        /* cross axis alignment */
    flex-wrap: wrap;            /* allow wrapping */
    gap: 16px;
}

.item {
    flex: 1;                    /* grow and shrink equally */
    flex-basis: 200px;
    align-self: flex-start;
}

justify-content Values

CSS Grid

CSS Grid is a two-dimensional layout system for rows AND columns.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
    grid-template-rows: auto;
    gap: 20px;
    padding: 20px;
}

/* Span multiple columns */
.header {
    grid-column: 1 / -1;    /* spans all columns */
}

.sidebar {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}

Named Grid Areas

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

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

Flexbox vs Grid

Responsive Layout Example

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

This creates a responsive grid that automatically adjusts columns based on available space.

Key Takeaway: Flexbox excels at one-dimensional layouts (navbars, card rows). CSS Grid is ideal for two-dimensional page layouts. Combining both gives you full layout control.