How to build a responsive layout in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Responsive layouts adapt to different screen sizes and devices, providing optimal viewing experiences from mobile phones to desktop monitors. As the creator of CoreUI, a widely used open-source UI library, I’ve built responsive layouts in Vue applications throughout my 11 years of Vue development. The most effective approach is using CSS Grid and Flexbox with mobile-first media queries in Vue components. This method ensures layouts work across all devices while maintaining clean, maintainable code.
Use CSS Grid with mobile-first media queries for responsive layouts that adapt to screen sizes.
<template>
<div class="responsive-layout">
<header class="header">
<h1>Header</h1>
</header>
<nav class="sidebar">
<ul>
<li>Navigation</li>
<li>Menu Items</li>
</ul>
</nav>
<main class="content">
<h2>Main Content</h2>
<p>Content area adapts to available space</p>
</main>
<aside class="aside">
<h3>Sidebar</h3>
<p>Additional content</p>
</aside>
<footer class="footer">
<p>Footer</p>
</footer>
</div>
</template>
<style scoped>
.responsive-layout {
display: grid;
grid-template-areas:
"header"
"sidebar"
"content"
"aside"
"footer";
grid-template-columns: 1fr;
min-height: 100vh;
gap: 1rem;
}
.header {
grid-area: header;
background: #3498db;
padding: 1rem;
}
.sidebar {
grid-area: sidebar;
background: #2c3e50;
padding: 1rem;
}
.content {
grid-area: content;
background: #ecf0f1;
padding: 1rem;
}
.aside {
grid-area: aside;
background: #95a5a6;
padding: 1rem;
}
.footer {
grid-area: footer;
background: #34495e;
padding: 1rem;
}
@media (min-width: 768px) {
.responsive-layout {
grid-template-areas:
"header header header"
"sidebar content aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
}
}
@media (min-width: 1024px) {
.responsive-layout {
grid-template-columns: 250px 1fr 300px;
}
}
</style>
Here CSS Grid defines layout structure with grid-template-areas for semantic positioning. Mobile-first approach stacks all sections vertically by default. The min-width: 768px media query restructures layout for tablets with sidebar, content, and aside side-by-side. The min-width: 1024px query adjusts column widths for desktop screens. Grid areas allow easy reordering without changing HTML structure, maintaining accessibility while adapting visual layout.
Best Practice Note:
This is the responsive layout pattern we use in CoreUI Vue templates for adaptive admin interfaces. Use CSS custom properties for breakpoint values to maintain consistency, implement container queries for component-level responsiveness, and test layouts across actual devices beyond browser DevTools for real-world validation.
