Brand New Layouts with CSS Subgrid
A tutorial exploring CSS Subgrid, showing how it extends grid layouts and enables new UI possibilities beyond basic CSS Grid.
Josh W. Comeau is a frontend developer, educator and creator known for his engaging tutorials and deep dives into modern web development. On his blog he writes about React, CSS, animation, accessibility and design systems, combining technical precision with visual storytelling. His interactive posts make complex concepts easy to understand and help developers learn how the browser really works. Josh is the author of the popular course The Joy of React. His articles often explore the creative and human side of programming, mixing code with empathy and fun. His blog stands out for its clarity, practical value and beautifully crafted interactive examples.
81 articles from this blog
A tutorial exploring CSS Subgrid, showing how it extends grid layouts and enables new UI possibilities beyond basic CSS Grid.
Learn how to use the CSS linear() timing function to create spring and bounce animations without JavaScript.
Explores the CSS @starting-style rule, its specificity issues, and provides practical workarounds for developers.
A CSS tutorial on creating dynamic color-shifting effects for web animations, including workarounds for CSS limitations.
A comprehensive guide to understanding and using SVG path elements, covering commands, syntax, and animations.
A beginner-friendly introduction to SVG, covering basic shapes, inline usage, and how to animate them with CSS and JavaScript.
Explores CSS partial keyframes, a technique for creating dynamic animations by omitting starting values.
A beginner-friendly explanation of why CSS height properties sometimes don't work as expected, exploring the fundamental differences between width and height.
An analysis of whether AI has replaced human software developers, arguing that AI currently augments rather than replaces developers.
A developer shares technical insights and techniques used to create the whimsical animations and interactive elements on their new course landing page.
A guide to using CSS container queries for responsive design, focusing on a practical layout pattern for email metadata.
A CSS tutorial on creating an optimized frosted glass effect using backdrop-filter, with tips for realism and performance.
A developer's framework for deciding when to use new CSS features, considering fallback experiences and browser support.
An introduction to CSS Container Queries, explaining their importance and how to use them for component-based responsive design.
A developer's exploration of the powerful CSS :has() pseudo-class, sharing real-world use cases and its surprising utility in modern web development.
A deep-dive tutorial explaining JavaScript Promises from the ground up, covering their necessity and how to use them effectively.
A guide to using React's useDeferredValue hook to optimize UI performance and prevent janky interfaces.
Explores the challenges and solutions for using CSS-in-JS libraries like styled-components with React Server Components in Next.js.
A comprehensive CSS tutorial covering multiple methods to center a div, including Flexbox, Grid, and auto margins.
An interactive tutorial explaining the fundamentals of CSS Grid, including mental models, grid construction, and alignment techniques.