How to create a responsive layout in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Creating responsive layouts ensures your React applications work seamlessly across all device sizes and screen resolutions. As the creator of CoreUI with 25 years of development experience, I’ve built countless responsive components for enterprise applications. The most effective approach combines CSS Grid for overall layout structure with Flexbox for component-level arrangements. This method provides maximum flexibility while maintaining clean, maintainable code.
Use CSS Grid with Flexbox and media queries to create flexible responsive layouts.
import React from 'react'
import './ResponsiveLayout.css'
const ResponsiveLayout = ({ children }) => {
return (
<div className="responsive-container">
<header className="header">Header</header>
<aside className="sidebar">Sidebar</aside>
<main className="main-content">{children}</main>
<footer className="footer">Footer</footer>
</div>
)
}
// ResponsiveLayout.css
const styles = `
.responsive-container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
@media (max-width: 768px) {
.responsive-container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main-content { grid-area: main; }
.footer { grid-area: footer; }
`
export default ResponsiveLayout
This component uses CSS Grid to define layout areas that automatically reflow based on screen size. The grid-template-areas property creates a semantic layout structure, while media queries handle the responsive breakpoints. On mobile devices, the layout switches from a two-column to a single-column stack, ensuring optimal usability across all devices.
Best Practice Note:
This is the same responsive strategy we implement throughout CoreUI components for enterprise-grade applications. Consider using CSS-in-JS libraries like styled-components for dynamic responsive behavior and component-scoped styles.
