CSS Flexbox vs Grid

Flexbox (1-Dimensional Layout)

Main Concepts

• Flex Container: Parent element with display: flex
• Flex Items: Direct children of flex container
• Main Axis: Primary axis (horizontal by default)
• Cross Axis: Perpendicular to main axis

Key Properties

.container {
    display: flex;
    flex-direction: row | column;
    justify-content: flex-start | center | space-between;
    align-items: stretch | center | flex-start;
    flex-wrap: nowrap | wrap;
}

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    align-self: auto | center | flex-start;
}

Use Cases

• Navigation bars
• Card layouts
• Centering content
• Equal-height columns
• Space distribution

CSS Grid (2-Dimensional Layout)

Main Concepts

• Grid Container: Parent with display: grid
• Grid Items: Direct children
• Grid Lines: Dividing lines of the grid
• Grid Tracks: Rows and columns
• Grid Areas: Rectangular areas

Key Properties

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

.item {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    grid-area: header;
}

Use Cases

• Complex page layouts
• Magazine-style layouts
• Image galleries
• Dashboard interfaces
• Overlapping elements

When to Use Each

Choose Flexbox When:

• Creating 1-dimensional layouts
• Aligning items in a container
• Distributing space between items
• Creating responsive navigation
• Simple card layouts

Choose Grid When:

• Creating 2-dimensional layouts
• Complex page structures
• Overlapping elements needed
• Magazine-style layouts
• Precise control over placement

Combining Both

Flexbox and Grid work well together:

• Use Grid for overall page layout
• Use Flexbox for component-level layouts
• Grid items can also be flex containers