Comprehensive Guide to Modern CSS Layout Techniques: Flexbox, Grid, and Common Patterns

Horizontal and Vertical Centering

Classic interview questions about centering can be solved easily with Flexbox or CSS Grid by setting justify-content and align-items to center on the container or by using margin:auto on a single flex item.

/* CSS */
.flex__container {
    display: flex;
    justify-content: center;
    align-items: center;
}

For icon centering, use display:inline-flex on the container.

/* CSS */
.flex__container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

Using margin:auto on a Flex Item

When there is only one flex item, setting margin:auto also centers it.

.flex__container {
    display: flex; /* or inline-flex */
}

.flex__item {
    margin: auto;
}

CSS Grid Centering

Grid can center content with a single line of CSS.

/* CSS */
.grid {
    display: grid; /* or inline-grid */
    place-items: center;
}

Equal‑Height Layouts

Setting display:flex (or inline-flex ) on a container makes all children stretch to the same height because align-items:stretch is the default.

.flex__container {
    display: flex; /* or inline-flex */
}

Sticky Footer

Make the footer stick to the bottom by using a column‑flex layout on body and giving margin-top:auto to footer .

body {
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

Alternatively, set flex:1 0 auto on main to let it grow.

main {
    flex: 1 0 auto;
}

Equal‑Distribution Columns

Flexbox: set flex:1 on each item inside a flex container.

.flex__container {
    display: flex;
}

.flex__item {
    flex: 1;
}

Grid: use grid-template-columns: repeat(3,1fr) for three equal columns.

.grid__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

Holy Grail Layout

Flexbox solution uses ordering to place nav , aside , and article while the body is a column flex container.

body {
    display: flex;
    flex-direction: column;
    width: 100vw;
}

main {
    flex:1;
    display:flex;
    align-items:stretch;
}

nav { width:220px; order:-1; }
article { flex:1; }
aside { width:220px; }

Grid solution can use grid-template-areas for a concise layout.

body {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 220px 1fr 220px;
    grid-template-rows: auto 1fr auto;
}

12‑Column Grid System

Flexbox implementation uses CSS custom properties to calculate column spans.

:root {
    --gutter:10px;
    --columns:12;
}

.flex__row {
    display:flex;
    margin-left:calc(var(--gutter)*-1);
    margin-right:calc(var(--gutter)*-1);
}

.flex__item {
    flex:1 1 calc((100%/var(--columns)-var(--gutter))*var(--span));
    margin:0 var(--gutter);
}

Grid implementation uses repeat(12,1fr) and gap for spacing.

.grid__container {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:10px;
    padding-left:5px;
    padding-right:5px;
}

.grid__item { grid-column:span var(--span); }

Justified Spacing (Space‑Between)

Flexbox with justify-content:space-between works for full rows; for the last incomplete row, add a pseudo‑element or use gap to keep items tightly packed.

.flex__container::after {
    content:"";
    display:flex;
    flex:0 1 32vw;
}

Responsive Sizing with clamp()

Use clamp(min, preferred, max) to set a width that never goes below 100px , never exceeds 500px , and prefers 50vw in between.

.element { width:clamp(100px,50vw,500px); }

Logo Alignment

Center logos of varying dimensions using a grid container and object-fit:contain on the images.

.brands__item img {
    width:130px;
    height:75px;
    object-fit:contain;
    mix-blend-mode:multiply;
}

Conclusion

The article demonstrates how modern CSS layout modules—Flexbox and Grid—simplify the implementation of common patterns such as centering, equal‑height columns, sticky footers, equal‑distribution columns, Holy Grail layouts, 12‑column systems, justified spacing, responsive sizing with clamp() , and logo alignment, providing concise code snippets for each.