Modern UI Layout Patterns
Connect the dots. Learn how to combine Flexbox, Grid, and Positioning to build the most common and robust UI patterns found in modern web applications.
Expert Answer & Key Takeaways
Connect the dots. Learn how to combine Flexbox, Grid, and Positioning to build the most common and robust UI patterns found in modern web applications.
1. The 'Holy Grail' Layout
The most common pattern in web development is a Header, two Sidebars, a Main content area, and a Footer. Modern CSS makes this trivial with Grid.
The Example: The 1-Minute Layout
.body-grid {
display: grid;
grid-template-areas:
"header header header"
"left main right"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: left; }
.content { grid-area: main; }
.footer { grid-area: footer; }| Pattern | Technology | Purpose |
|---|---|---|
| Sticky Footer | Flexbox | Keeps the footer at the bottom even on short pages. |
| Centering | Grid/Flex | Perfectly centers an element in 2 lines. |
| Responsive Gallery | Grid | A card layout that adapts with zero media queries. |
| Split Nav | Flexbox | Logo on the left, links on the right. |
2. The Unbreakable Sticky Footer
One of the classic CSS challenges: How do you keep the footer at the bottom when the page has very little content?
The Reliable Fix:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1; /* Pushes the footer down */
}3. The Auto-Responsive Gallery
Building an image gallery that works on every screen size without media queries is the gold standard of modern CSS.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}[!TIP] Mastery Secret: Useauto-fillif you want your cards to always stay the same size (leaving empty space at the end), andauto-fitif you want your cards to stretch to fill the entire row width.
🎯 Practice Challenge: The Dashboard Structure
- Create 4 sections:
header,nav-sidebar,main-content, andfooter. - Task 1: Use
display: gridto arrange them into a 2-column, 3-row layout. - Task 2: On mobile (below 768px), use a media query to flip the layout into a single vertical column.
- Task 3: Ensure the
nav-sidebarstays fixed or sticky while themain-contentscrolls.
4. Senior Interview Corner
Q: When should I choose Flexbox over Grid for a UI component?
A: Use Flexbox for small, recursive components where the content size determines the flow (like a navigation menu or a list of tags). Use Grid for the overall frame of the page where the layout is rigid and 2-dimensional (header, sidebar, content rows).
Q: What is the most common mistake when building a sticky header?
A: Not accounting for the 'jump' in content when the header becomes sticky. When a header moves from relative to fixed/sticky, it's removed from the flow, making the content below jump up. To fix this, you often need to add
padding-top to the body equal to the header's height.Top Interview Questions
?Interview Question
Q:To create a sticky footer with Flexbox, which property do you apply to the main content area?
A:
flex-grow: 1
?Interview Question
Q:Which grid function allows for a responsive gallery without using media queries?
A:
repeat(auto-fill, minmax(200px, 1fr))
Course4All Engineering Team
Verified ExpertFrontend Architects
Focused on layout performance, modern CSS4+ features, and responsive design, our team provides the blueprint for professional web interfaces.
Pattern: 2026 Ready
Updated: Weekly
Found an issue or have a suggestion?
Help us improve! Report bugs or suggest new features on our Telegram group.