HTML & CSS Interview Question #95

What is the difference between CSS Grid and Flexbox?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

Flexbox is primarily one-dimensional: it lays items out along one main axis at a time. Grid is two-dimensional and can coordinate both rows and columns.

Detailed Explanation

Flexbox is primarily one-dimensional: it lays items out along one main axis at a time. Grid is two-dimensional and can coordinate both rows and columns.

They are complementary rather than competing technologies. Grid is often a strong choice for overall two-dimensional structures, while Flexbox works well for alignment and distribution within individual components. Many production layouts use both.

Code Example

.page {
    display: grid;
    grid-template-columns: 16rem 1fr;
}

.card-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}