Common CSS Layout Patterns

1. Centered Content

Vertically and horizontally center elements using Flexbox:

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
            

2. Holy Grail Layout

A classic layout with header, footer, main content, and two sidebars:

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

3. Sidebar Layout

Two-column layout with sidebar and content:

.wrapper {
    display: flex;
}

.sidebar {
    width: 250px;
}

.content {
    flex: 1;
}
            

4. Card Grid Layout

Responsive card grid using CSS Grid:

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

5. Sticky Header/Footer

Keep elements fixed to the top or bottom of the viewport:

.header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1000;
}
            

Conclusion

These layout patterns form the foundation for most modern web interfaces. By combining Flexbox, Grid, and positioning, you can create responsive, accessible, and maintainable designs with ease.