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 in React ensures your applications work seamlessly across all devices, from mobile phones to desktop computers. With over 25 years of experience in software development and as the creator of CoreUI, I’ve built countless responsive interfaces for enterprise applications. The most effective approach is combining CSS Grid for overall layout structure with Flexbox for component alignment and media queries for breakpoint management. This provides flexible, maintainable layouts that adapt automatically to different screen sizes and orientations.
Use CSS Grid and Flexbox with React state to create responsive layouts that adapt to different screen sizes and device orientations.
import { useState, useEffect } from 'react'
import './ResponsiveLayout.css'
function ResponsiveLayout() {
const [isMobile, setIsMobile] = useState(window.innerWidth < 768)
useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth < 768)
}
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [])
return (
<div className="responsive-container">
<header className="header">
<h1>Responsive Header</h1>
{!isMobile && <nav>Navigation Links</nav>}
</header>
<main className="main-content">
<aside className={`sidebar ${isMobile ? 'mobile-hidden' : ''}`}>
<div>Sidebar Content</div>
</aside>
<section className="content">
<div className="grid-container">
<div className="card">Card 1</div>
<div className="card">Card 2</div>
<div className="card">Card 3</div>
<div className="card">Card 4</div>
</div>
</section>
</main>
<footer className="footer">
<p>Responsive Footer</p>
</footer>
</div>
)
}
This responsive layout uses React state to track screen size changes and conditionally renders elements based on device type. The CSS Grid handles the overall page structure while Flexbox manages component alignment. Media queries in CSS control breakpoint behavior, and the resize event listener updates the mobile state dynamically for interactive responsiveness.
Best Practice Note:
This responsive design pattern is used throughout CoreUI’s admin templates for optimal cross-device compatibility. Consider using CSS custom properties (CSS variables) for consistent spacing and implement container queries for component-level responsiveness in modern browsers.
